Question

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

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

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

当然，我会添加事件监听器，就像thisone

一样

$.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()功能。这两个都会自动重新绑定已加载内容的事件。

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

更多信息

Answer 3

使用jQuery的live语法：

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

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

在AJAX加载新的html时更新javascript事件

4 个答案:

描述

示例

更多信息