javascript - HTML 内容没有出现在 Jquery 点击功能上

Question

在我的代码中，我有以下内容：

$(document).ready(function(){           
    $("input#Addmore").click(function(){
        $('div#add_div').append("<a class='remove' href='#'>X</a>");
    });         
});

此代码单击添加更多按钮，我想通过 jquery 单击“X”删除上述添加代码的父 div。为此，我正在使用此代码

$("a.remove").click(function(){ 
    $(this).closest("div").remove();
});

但是代码不起作用，因为 jQuery 没有获取附加锚代码。谁能告诉我解决方案？

Answer 1

您需要将事件委托给最近的静态元素。试试这个：

$('#add_div').on('click', 'a.remove', function() {
    $(this).closest("div").remove();
});

或者，如果您使用的是旧版本的 jQuery（小于 1.7） ，请delegate()像这样使用：

$('#add_div').delegate('a.remove', 'click', function() {
    $(this).closest("div").remove();
});

Answer 2

试试这个

$('#add_div').delegate('a.remove', 'click', function() {
    $(this).closest("div").remove();
});

Answer 3

或者你可以试试这个：

  $("input#Addmore").click(function(){
       $("div#add_div").append("<a class='remove' href='javascipt:;' onclick='remove(this);return false' href='#'>X<br/></a>");
});    

这是删除功能：

 window.remove = function(obj)
   {
        $(obj).closest('div').remove();
   }

见这里：http: //jsfiddle.net/Hvx2u/3/