2

在我的 .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);
});

我怎样才能让它正常工作？

4

4 回答 4

3

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

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

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

或者您bind在添加按钮的点击事件回调中手动添加它们。 http://api.jquery.com/bind/

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

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

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

于 2013-03-23T20:00:47.063 回答
0

尝试.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);
    });

});
于 2013-03-23T19:53:26.893 回答
0

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

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

它是 on 方法的“版本”委托，带有一个与 id 属性中的模式匹配的精美选择器

于 2013-03-23T19:59:51.197 回答
0

使用 jQuery 的on 方法，就像在另一个答案中提到的那样，但是使用发送到您的处理程序的 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 开始，该方法已被弃用 这里是对使用 jQuery 附加事件的不同方法的精彩讨论

于 2013-03-23T20:13:53.100 回答