使用 .load() 更改 divs 内容时，我需要重新包含我的脚本

Question

我使用 .load（） 用新内容填充div，但是当我这样做时，我必须调用我所有的脚本才能在新内容中使用它们，这就是导致我的事件处理程序触发两次的原因。

我错了吗？如果没有，有替代方法吗？

    $('.user').click(function(){
    if ($section !== 'users'){
        $section = 'users';
        $('div#contentWrapper').fadeOut(0).empty();
        $('div#contentWrapper').load('pages/users.html').fadeIn(500);
    }
    else{
        return;
    }

这是显然触发两次的代码。

    $('.addUser').click(function(){        
    $('.userPanel').fadeOut(0).empty();
    $('.userPanel').load('pages/addUser.html').fadeIn(500);
    });

我最初认为是淡出导致了它，所以我将其设置为即时，但这并没有解决问题。网站上的另一篇文章建议首先取消绑定点击处理程序，但据我了解，这是一个解决方法而不是修复，而是解决了这个问题。

我是jquery的新手，非常感谢你们可以提供的任何帮助。

Answer 1

动态加载元素时，需要使用 jQuery 的 .on() 函数将事件绑定到加载的元素。您需要将 .on() 绑定到 DOM 中已经存在的元素，通常最坏的情况是 body 元素。如果您比body更具体，您通常会获得更高的性能。

例如，如果将表行加载到表中，并希望在新行上绑定单击事件，则可以使用：

$("table").on("click", "tr", function(event){
    //do something
});