动态页面中JQuery被触发两次

Question

我的问题：我有一个页面index.php，它动态地将一些html内容从admin_agent_area.php加载到index.php中的一些div（#adminarea）中。当单击链接“#adduser”并且 jquery 函数正在处理加载和插入时会发生这种情况。现在，在 admin_agent_area.php 中。当 admin_agent_area.php 加载时，我还有一些其他 div (#usertable) 加载了一个表。

id=#adduser 是index.php 中“adminarea”之外的链接()。

单击表格时会出现警报。

加载内容后，链接 #adduser 仍然可见。再次按下时，admin_agent_area.php 会再次加载，表格也会加载。现在，在表内单击会相继显示警报两次。这很糟糕，应该只有一次。我可以在 Firebug 中看到，当我希望事情只发生一次时，事情确实发生了两次。

我遇到过类似的问题，并在加载内容之前使用 .empty 解决了它。但这样做时，一切都在同一边。

index.php 结构

< a id="adduser"> Add user < /a>

< div id = "adminarea">< /div>

admin_agent_area.php 结构一部分

< div id="modalarea">< /div>

< div id="usertable">< /div>

admin_agent_area.php 我的javascript加载了index.php

$(document).ready(function() { 
      $("#adduser").click(function () {
                $("#adminarea").empty();
                    $("#adminarea").load("http://localhost/SMICAdmin/adminactivities/admin_agent_area.php", function(data) { }); 

            });
});

admin_agent_area.php中的所有内容都加载到index.php中的div #adminarea中。我认为在加载新内容之前确保我将其清空，可以这么说，重置整个#adminarea，就像我以前从未加载过任何东西一样。

这是与 admin_agent_area.php 一起加载的 javascript。当单击表中的一行时，会触发此脚本：

$("table[id$='agents'] td:nth-child(1)").live('click',function(event)  

        {  
            $("#usertable").empty();
            alert("loadupdatagent");

            event.preventDefault();  

            var $td= $(this).closest('tr').children('td');  

            var $agentid=$td.eq(2).text();  

        $.get("http://localhost/SMICAdmin/adminactivities/admin_update_agent.php", { agent_id: $agentid }, function(data){ 
            $("#modalarea").empty();
            $("#modalarea").html(data);
            $('#modalarea').css("visibility","visible");
        });

正如您所看到的，这是警报所在的脚本。

id=#modalarea 是单击表格行后应该加载某些内容的区域。对于问题本身来说应该不重要，但我可以在 Firebug 中看到 .get 请求也发出了两次。

我该如何解决这个问题？我认为不需要 HTML 代码，请告诉我，我也会添加它。

Answer 1

试试这个：

$("table[id$='agents'] td:nth-child(1)").live('click',function(event) {
    if($(this).is('#adduser'))
    {
        $("#adminarea").empty();
        $("#adminarea").load("http://localhost/SMICAdmin/adminactivities/admin_agent_area.php", function(data) { }); 
    }
    else
    {
        // rest of function....
    }
});

Answer 2

尝试使用 remove(true) 而不是 empty()。这实际上就像 HTMLElement 从未出现在页面上一样。 true 意味着所有事件处理程序也将被取消注册。

Answer 3

好吧，这（对我来说）是一个凝灰岩。

当加载 admin_agent_area.php 时，它也会加载 .js 文件，因为 <<脚本...>标签是在该文件中定义的。多次单击“#adduser”时，admin_agent_area.php 和 .js 文件也会加载多次。

我不明白事件处理程序如何绑定到元素，但在某种程度上，每次加载时我都会为我的元素获得更多事件处理程序。至少看起来是这样。

我的解决方案是动态地从index.php加载.js文件。由于某种原因，它无法在 << 中加载 .js 文件。脚本......>在index.php 中，脚本对于动态加载的内容似乎不可见。如果您知道这一点，请毫不犹豫地解释一下。但我想如果元素不可用于绑定事件处理程序，则不可能首先加载 .js 文件。

 $(document).ready(function() {
      var register_agent_page;   
      $("body").delegate("#adduser", "click", function (event) {                
                        if(register_agent_page==null){ 
                            $("#adminarea").load("http://localhost/SMICAdmin/adminactivities/admin_agent_area.php", function(data) {
                                    register_agent_page = data;
                                    $.getScript("http://localhost/SMICAdmin/adminactivities/admin_agent_script.js");
                                    $('#usertable').load("http://localhost/SMICAdmin/adminactivities/admin_load_agents.php");                                             

                            }); 
                        }else{

                            $("#adminarea").html(register_agent_page);                         
                            $('#usertable').load("http://localhost/SMICAdmin/adminactivities/admin_load_agents.php");                                             
                        }
  });

我确保只在第一次加载页面，不知道这是否重要，但它节省了一些请求。我第一次单击“#adduser”时也会加载 .js 文件。现在，.js 文件将仅被调用一次。

无法正常工作的是在加载 .js 文件时自动将数据加载到用户“#usertable”中。第一次很好，但第二次我点击“#adduser”时，.js 文件已经加载，我需要以不同的方式加载用户表。因此，我加载该表并将其添加到由index.php 加载的javascript 文件中的div“#usertable”。

噗！

Answer 4

嘿，关于动态页面无法访问脚本的说法是不正确的。

事件处理程序是在脚本加载时注册的，因此它不会注册那些动态创建的元素。解决方案是使用 jquery 的“on”函数，即使在加载脚本后也可以绑定元素。

Answer 5

@Nicsoft

如果有人读过我的评论jquery在dom加载后不会添加事件处理程序，所以你需要使用'on'函数，委托，live函数是较旧的函数，很快就会被删除。 'on' 是为动态加载的元素添加事件处理程序的替代方法。

http://api.jquery.com/on/

这是 on 命令的链接

$( " < 任何不像 body 那样动态加载的元素 > ").on(' < 事件名称 > ', ' < 动态加载的实际元素 > ', function(){
// 您想要为事件执行的代码
});