Question

寻找关于我的AJAX / jQuery实现的一些帮助。

我正在尝试将一些代码动态加载到jQuery对话框中。
里面有一些jQuery代码初始化按钮并加载一些标签。

问题是加载内容中的代码没有在第二个AJAX调用上执行。因此，第一次一切正常，但在关闭对话框并再次重新打开后，一切正常。

基本页面

$("#button").click(function () { someFunction(); });

function someFunction () {
    var dialogVar = $('<div id="dialog"></div>').appendTo('body');
    dialogVar.dialog({  autoOpen: true,
            modal: true,
            close : function(){
                $(this).dialog("destroy");
            },
            open : function(){
                        dialog.load("dialogcontent.php",{} , function(data){
                        // Some logic       
                    });
    }
}

动态加载内容（dialogcontent.php）

<script type="text/javascript">
   $("#tabs").tabs();
</script>


<div id="tabs">
    <ul>
        <li><a href="#tabs-0">Tab1</a></li>
        <li><a href="#tabs-1">Tab2</a></li>
    </ul>
</div>


<div id="tabs-0">Tab1 Content</div>
<div id="tabs-1">Tab2 Content</div>

再次，标签是第一次创建，但不是第二次创建。我可以看到发送到服务器的POST调用和返回的数据但是JS没有被执行。

Answer 1

您的问题可能是每次单击按钮时都要重新创建并将对话框节点附加到DOM。重构代码以实例化对话框一次（在页面加载时），将autoOpen设置为false，以便它不会立即弹出，并连接按钮以打开对话框。

$(function(){
  var dialogVar = $('<div id="dialog"></div>').appendTo('body');
  dialogVar.dialog({  
    autoOpen: false,
    modal: true,
      close : function(){
        $(this).dialog("destroy");
      },
      open : function(){
        dialog.load("dialogcontent.php",{} , function(data){
           // Some logic       
        });
      }
  });

  $("#button").click(function () { 
    $('#dialog').dialog('open');
  });

};

我假设您正在使用jQuery UI对话框，因此我引用了此处提供的文档：http://jqueryui.com/demos/dialog/#method-open

Answer 2

我也碰到了这个。

看起来标签会在调用之间保持某种状态，后续调用会增加每个标签ID，从而导致内部状态混乱。总之，你必须致电tabs("destroy")

因此，您的对话框关闭代码可能如下所示：

   close : function(){
         $("#tabs").dialog("destroy");
         $(this).dialog("destroy");
   },

Answer 3

应该}，是};在openFunction（）之前？

此外，此处列出的问题和答案： How to call second jQuery.ajax instance on success of first and update page

可能有用。

第二次AJAX调用后没有运行jQuery代码

3 个答案: