Javascript JQuery在动态页面中被触发两次

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

id=#adduser是index.php中的链接（），位于“adminarea”之外

在表格中单击时，将显示警报

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

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

index.php是结构的一部分

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

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

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

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

来自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代码应该是必要的，请让我知道，我会添加它以及

试试这个：

$("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....
    }
});

不要使用

empty（）

尝试使用

remove（true）

。这将有效地表现为HtmleElement从未出现在页面上。

true

意味着所有事件处理程序也将被注销。

好的，这（对我来说）是一个简单的问题

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

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

我的解决方案是从index.php动态加载.js文件。由于某些原因，在index.php的中加载.js文件不起作用，对于动态加载的内容，脚本似乎不可见。如果你知道的话，不要犹豫解释。但是我想，如果元素不可用于绑定事件处理程序，那么首先加载.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");                                             
                        }
  });

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

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

---

呸

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

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

@Nicsoft

如果有人读过我的评论，jquery在加载dom后不会添加事件处理程序，因此您需要使用“on”函数、delegate，live函数是较早的函数，很快就会被删除on’是为动态加载的元素添加事件处理程序的替代

这是指向on命令的链接

$（“<任何不动态加载的元素，如body>”）。在（“<事件名称>”，“<实际元素动态加载>”，函数（）上{ //要为事件执行的代码

---

});

不，没用。如果不在表内单击，则永远不会调用此函数#adduser是index.php中的一个链接（），位于“adminarea”之外。请解释一下。我不明白这个==#adduser怎么可能是真的，因为这个函数只有在单击表行时才会触发。也许我不明白什么。如果我单击页面上其他地方的链接，是否可以触发以$开头的jquery（“table[id$='agents']td:nth child（1）”，即使它不是一个表且id为“#adduser”？请阅读：它也有效地删除了我引用的实际元素，不是吗。因此，如果我首先删除$（“#adminarea”）.remove（true）；然后尝试加载时，会出现错误，因为#adminarea不再存在。这是正确的分析吗？它不起作用，出现错误：“c.replace不是一个函数”。使用一个可以安全地从DOM中删除的容器怎么样？Beefyhalo，你是说像一个div一样我可以完全删除吗？请您详细说明一下好吗？当然，如果您要加载到#adminarea，您可以执行类似于

$（“#adminarea”）

.children（）.remove（true）`的操作，然后将

加载（…）

到#adminarea内新创建的子对象中。孩子将充当您要装载的任何东西的容器。您也可以轻松地将其从DOM中删除，而不会产生任何负面影响。如果我执行$（“#adminarea”）.children（）.remove（true）然后执行$（“#adminarea”）.loa，该操作是否有效

 $(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");                                             
                        }
  });