1

我的页面上有多个 div，可以动态添加到页面中，也可以删除。

在页面加载时，动态创建的 div 是从localStorageuniqiue id 和一个公共类加载的，具体取决于 div，我同时调用一个函数，content().

该函数content()如下所示：

function content(){
    alert("test");
    $(".two button").click(function(){
        var id = $(this).parent().attr("id");
        alert(id);
    });
}

很简单，它所做的只是在调用函数时提醒“test”，如果你点击.two <button>，它会提醒.two <textarea> .val()。

一旦加载了 div 就可以正常工作，但是当我克隆 div 时遇到了问题

当我克隆 div 时，它会为它们提供一个唯一的 id 和一个像上面一样的通用类。在结束时cloneDiv()，我调用content()，这样点击里面的元素就会产生和上面一样的结果。

问题是，该函数将被调用的次数与屏幕上 div 的次数一样多，但这也意味着单击<button>div将发出3 次.two警报。.two <textarea> .val()

TLDR；点击.twoget 中的按钮的次数与屏幕上 div 的次数一样多，因为一旦创建动态 div 就会调用该函数，但只能调用一次。

有很多代码可以完成这一切，但我想我已经很清楚地解释了发生的事情。但是，如果这会有所帮助，我会制作一个演示。

4

3 回答 3

3

您想使用以下.on功能：

$('body').on('click', '.two button', function(){
    var id = $(this).parent().attr("id");
    alert(id);
});

我会将其中的'body'一部分更改为这些按钮的真实容器。所以说按钮总是在带有 id 的内容 div 中my-div，你会这样做：

$('#my-div').on('click', '.two button', function(){
    var id = $(this).parent().attr("id");
    alert(id);
});

您也只需要此代码运行一次，因此无需将其放入多次调用的函数中。只需将其放入您的$(document).ready(....).

小提琴：http: //jsfiddle.net/gromer/dxbqz/

于 2012-09-27T23:42:32.417 回答
1

这就是“事件委托”的用途。您在文档上设置了一个处理程序，它将处理来自其后代的事件，即使它们是在附加处理程序之后创建的：

$(document).on("click", ".two button", function(){
// put a click hander on the document to process clicks
// from buttons that are descendants of elements with class=two
于 2012-09-27T23:43:42.627 回答
1

问题是这样的：“在cloneDiv()的最后，我调用了content()，这样点击里面的元素就会产生和上面一样的结果。” 发生的事情是您将事件复合到现有元素上，这就是为什么您会收到如此多的回调。您应该改为使用该.on功能，并且只使用一次。如果您.on多次调用它将产生相同的结果，因为将注册多个事件。

$(".two button").on("click",function(){
    var id = $(this).parent().attr("id");
    alert(id);
});

这样做一次，每个匹配的按钮(".two button")都会响应它，即使稍后附加。

另一种方法是将元素传递给 content() 调用，然后如果您在创建元素时总是调用此函数，则从那里标记它。

function content(element){
 $(element).click(function(){
    var id = $(this).parent().attr("id");
    alert(id);
 });
}

附带说明一下，使用警报进行调试可能会出现问题，因为它们会中断程序执行。我强烈建议使用console.log(id)，然后在控制台中查找您的测试变量。console.trace()如果您使用第三方脚本并且需要查看哪里出了问题，这也是一个很好的记住。

于 2012-09-27T23:46:15.290 回答