如何使用 JQuery 同步修改和显示 html

Question

我下面的代码不起作用。我想删除加载页面的某些部分。在进行所有修改之前，该页面不应显示在对话框中。

  var $div = $('<div>');
       $div.load("../payment/list", function(){
           $div.find("#cssmenu").remove();
           $div.find("#toolbar").remove();
           $div.find("#categoryDialog").remove();              
           $div.find("h1").remove();  
           $("#paymentDialog2").html($div);
       });

但是内容之后被加载和修改，这看起来很糟糕。

Answer 1

你为什么不尝试使用 ajax（） 来代替：

var $div = $('<div>');
var response;
$.ajax({
  url: "../payment/list"
}).done(function( data ) {
  response = data;
});
// remove unwanted elements
$div.find("#cssmenu").remove();
$div.find("#toolbar").remove();
$div.find("#categoryDialog").remove();              
$div.find("h1").remove(); 
// append data from ajax response to your container
$div.append(response); 
// display you content
$("#paymentDialog2").html($div);

Answer 2

你可以使用 jquery ajax get

$.get( "../payment/list", function( data ) {
    var $div = $('<div>');
    var $data = $(data);
    $data.find("#cssmenu").remove();
    $data.find("#toolbar").remove();
    $data.find("#categoryDialog").remove();              
    $data.find("h1").remove();  
    $div.html($data.html());
    $("#paymentDialog2").html($div);
});

Answer 3

原因是 load（） 函数加载内容，然后执行回调函数。解决此问题的最简单方法是使用 css。对响应进行父div 并将其隐藏。并在将其附加到页面元素后将其设置为可见。

让。。/付款/列表像

<div id="parent" style="display:none">
<!-- your page content -->
</div>

然后

    var $div = $('<div>');
           $div.load("../payment/list", function(){
               $div.find("#cssmenu").remove();
               $div.find("#toolbar").remove();
               $div.find("#categoryDialog").remove();              
               $div.find("h1").remove();  
               $("#paymentDialog2").html($div);
               $div.find("#parent").removeAttr("style");
           });