Question

我有一些动态创建的div，我正在使用bind / live（尝试两种，相同的结果）来添加click功能。但是，它返回所有具有相同类的div。

实施例;

我有3个动态生成的div

1 2 3

如果我点击2，警告方法会显示1然后是2然后3.我只需要点击一下。谢谢！

$("#borang_main_form").append('<div class="borang-row" id="'+id+'"><label id="label_'+id+'"></label><input id="textbox_'+id+'" type="text" /></div>').bind("click", function(){alert(id);});

我试过这个并且它有效。

$("#borang_main_form").append('<div class="borang-row" id="'+id+'"><label id="label_'+id+'"></label><input id="textbox_'+id+'" type="text" /></div>').delegate("#" + id, "click", function(){alert(id);});

然而它看起来有点脏。是否有更好的方法来处理这样的事情？

Answer 1

您可以在点击处理程序$(e.target)中使用function(e){ ... }来获取引用您实际点击的元素的jquery对象。

http://jsfiddle.net/fDZ4J/1/

Answer 2

当您使用循环迭代时，使用方法链接，这基本上最终会将n个事件绑定添加到同一个父项（“#borang_main_form”）

在循环中首先附加项目，然后在循环外部将事件侦听器添加到各个子元素。

for(var i=0; i<3; i++)
{
  var id = i;
  $("#borang_main_form").append('<div class="borang-row" id="'+id+'"><label id="label_'+id+'"></label><input id="textbox_'+id+'" type="text" /></div>')
}
$('.borang-row').on("click", function(){alert($(this).attr('id'));});

在事件处理函数中，$（this）将被映射为被点击的项目（事件的触发器），并且通过$(this).attr('id')，您将获得该元素的id属性。

Div bind / live激活所有方法

2 个答案: