jquery - AJAX 加载新 html 时更新 JavaScript 事件

Question

我通过如下模板将一些新的 HTML 加载到我的页面:

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

此请求已完成多次，因此返回的 data 包含带有 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() 部分之后，然后是与模板加载次数一样多的事件。也就是说，如果我使用此模板加载 25 个项目，“togglethis”旁边的“内容”将来回切换 25 次然后停止。

我应该把事件处理程序放在哪里才能让它只触发一次？还是我从一开始就想错了？

Answer 1

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