AJAX 加载新 html 时更新 javascript 事件答案

【问题标题】：Update javascript event when AJAX-loading new htmlAJAX 加载新 html 时更新 javascript 事件
【发布时间】：2012-01-12 21:37:40
【问题描述】：

我通过这样的模板将一些新的 HTML 加载到我的页面：

$.post("templates/single.html", function(data){
    $("#feed").append(
        data.replace( /{{title}}/ , "Title")
            .replace( /{{subtitle}}/ , "Subtitle")
            .replace( /{{text}}/ , val.fragment)
    );
});

此请求执行了多次，因此返回的“数据”包含带有 class="togglethis" 的 div 标签。我想用 jQuery 添加一个事件监听器来监听那些被点击的类。

我自然会添加事件监听器，比如这个

$.post("templates/single.html", function(data){
    $("#feed").append(/*skipped code here*/);

    $(".content").hide();
    $(".togglethis").click(function(){
        $(this).siblings(".content").slideToggle();
    });
});

就在 $("#feed).append()-part 之后，但随后触发的事件与加载模板的次数一样多。也就是说，如果我使用此模板加载 25 个项目，则旁边的“内容” “togglethis”会在停止之前来回切换 25 次。

我应该把我的事件处理程序放在哪里让它只触发一次？或者，我从一开始就想错了吗？

【问题讨论】：

标签： jquery events javascript-events

【解决方案1】：

您可以使用 jQuery 的 .live() 或 .on() 功能。这两个都会为加载的内容自动重新绑定事件。

【讨论】：

【解决方案2】：

说明

您的 div 是动态创建的，因此，根据您使用的 jQuery 版本，您需要 jQuery.live() 或 jQuery.on() 方法

jQuery.live() 从 jQuery 1.3 开始 一个事件处理程序，用于现在和将来匹配当前选择器的所有元素。

jQuery.on() 自 jQuery 1.7 起 - 将一个或多个事件的事件处理函数附加到所选元素。

样本

$(".togglethis").live("click", function(){
    $(this).siblings(".content").slideToggle();
});

或

$(".togglethis").on("click", function(){
    $(this).siblings(".content").slideToggle();
});

更多信息

【讨论】：

我应该把那个 live/on-code 放在哪里？如果我把它放在我的 ajax 回调中（和以前一样），切换仍然会触发 25 次。如果我把它放在 ajax 调用之外，什么都不会发生。
把它放在你的回调之外，你只需要每页执行一次，而不是每次回调成功。

【解决方案3】：

使用 jQuery 的live 语法：

$(".togglethis").live('click', function(){
    $(this).siblings(".content").slideToggle();
});

【讨论】：

我应该把那个 live/on-code 放在哪里？如果我把它放在我的 ajax 回调中（和以前一样），切换仍然会触发 25 次。如果我把它放在 ajax 调用之外，什么都不会发生。
放一次，在 ajax 调用之外，但在 $(document).ready(function(){});

【解决方案4】：

这就是现在的样子，有什么问题吗？

$(".togglethis").on("click", function(){
    $(this).siblings(".content").slideToggle();
});

$.post("templates/single.html", function(data){
    $("#feed").append(
        data.replace( /{{title}}/ , "Title")
            .replace( /{{subtitle}}/ , "Subtitle")
            .replace( /{{text}}/ , val.fragment)
        );
    $(".content").hide();
});

【讨论】：