0

如果用户需要添加更多信息,我正在使用 append 方法添加一些输入字段和一个按钮来形成。每个按钮具有不同的名称和 ID,但具有相同的类。

附加过程工作正常,但是当我想使用新按钮删除特定字段时,它不起作用。单击操作适用于默认情况下存在的第一个按钮,但现在适用于在运行时添加的按钮。

   rc; //is the counter which increments by one, each time.
   jQuery('#mytable').append("<div id='rev-" + rc + "' class='reviewer'>" +
                             "<input type='text' name='reviewer_email[]' id='reviewer_email" + rc + "' value=''  />" +
   "<input type='button' name='rd" + rc + "' id='rd" + rc + "' class='rrd' value='Remove' /></div>");

   jQuery(".rrd").click(function(){
    alert("Test");
   });

我已经搜索了解决方案,首先我对所有按钮使用相同的 id,但现在我对每个按钮使用相同的类而不是 id。

任何人都可以给出一个想法,我要去哪里错了。

上面的代码不是确切的代码,而是想法,我如何使用它。

谢谢。

4

3 回答 3

2

您只能.click()对已添加到 DOM 的元素使用事件处理程序。

对于动态添加的元素,您应该使用.on()

$(document).on("click", ".rrd", function(event){
    // do stuff
});

或者当使用 jQuery < 1.7 时,你应该使用.delegate()

$(document).delegate(".rrd", "click", function(event){
    // do stuff
});

请注意,.live()已弃用且速度较慢

来自 jQuery 文档:

从 jQuery 1.7 开始,不推荐使用 .live() 方法。使用 .on() 附加事件处理程序。旧版本 jQuery 的用户应该使用 .delegate() 而不是 .live()。

于 2012-05-16T13:55:46.403 回答
0

这不是您的问题的直接解决方案,但总体上对您来说可能是更好的解决方案。您是否考虑过使用现有插件而不是自己开发所有内容?

看看SheepIt可能还有其他的,但我只用过这个。

于 2012-05-16T13:59:59.057 回答
0

您使用类 .rrd 在所有元素上绑定了事件,但这不包括动态创建的元素(在页面加载后)。

而是先定位 head 元素,然后再定位要删除的实际元素。

查看此视频,详细说明-> http://tutsplus.com/lesson/bind-live-delegate-huh/

于 2012-05-16T13:57:25.543 回答