Question

在我的.js文件中，我有一个按钮监听器，它生成以下内容：

$('#add').click(function(){
$('<div id="school-field'+i+'"><fieldset><a href="javascript:" id="remove'+i+'">Remove</a></fieldset></div>').fadeIn('slow').appendTo('.school');
});

我一直在尝试为添加按钮生成监听器，但我无法让它工作。我试图在'a'上使用委托，但是找到div的id是问题。如果我对所有生成器都有相同的div id（div id =“school-field”），我确实可以使它工作，但它会删除最后添加的元素，而不是单击“remove'+ i +'”的元素。我还尝试通过执行来定义其中的侦听器，但它抛出异常：

$('#remove'+i'').click(function(){
var div = document.getElementById("school-field'+i+'");
div.parentNode.removeChild(div);
});

如何让它正常工作？

Answer 1

从jQuery 1.7开始，您应该使用on，因为live和bind都已弃用。

$(document).on("click", ".delete", function(event){
    //Your code   
});

~~您可以使用live自动将新DOM元素绑定到事件侦听器： http://api.jquery.com/live/~~

~~或者您可以在添加按钮的click事件回调中手动添加bind。 http://api.jquery.com/bind/~~

您只需要使用一个类或另一个匹配事件listerners的每个元素的选择器。

然后，您可以使用closest匹配父框。

它看起来类似于$(this).closest('div').remove();以删除整个父div。

Answer 2

尝试使用.on()这样的

$("[id^='remove']").each(function() {
  var id = parseInt(this.id.replace("remove", ""));
  var elem = $("#remove" + id);

    $("#remove" + id).on('click',function(){
      var div = document.getElementById("#school-field"+id);
      div.parentNode.removeChild(div);
    });

});

Answer 3

如何使用'a [id * = remove]'作为on方法的选择器。例如：

$('first common container your a tags are stored').on('click', 'a[id*=remove]', function () {
    // your code to remove elements
});

它使用与id属性中的模式匹配的花式选择器委托on方法的'version'

Answer 4

使用jQuery的on method，如另一个答案所述，但使用发送给处理程序的event.currentTarget参数。

$('some container you keep your links').on('click', 'a[id*=remove]', function (event) {
    $el = $(event.currentTarget).parent();
    $el.remove();
});

使用live可以获得类似的功能，但是从jQuery 1.7开始，该方法已经过折旧 here对使用jQuery附加事件的不同方法进行了很好的讨论

jquery - 为生成的html添加监听器

4 个答案: