Question

我已将<li>标记附加到密切的类标记

HTML代码

<ul id="keyword">

</ul>

jquery的

$("#btnadd").click(function() {
                addkey = document.getElementById("txtaddkey").value;
                if(addkey!=""){
                $('#keyword').append('<li><span>'+addkey+'</span><span class=\"amountin\"><a href=\"#\">$0.05</a> $ <input type=\"text\" maxlength=\"5\"/></span><span class=\'close ui-icon \'></span></li>');
                $('#txtaddkey').val('');
                }
            });
    $(".close").click(function (){
                $(this).parent().remove();  
            });

在li附加到ul标签后，我尝试通过单击关闭图标删除li标签，但事件不起作用。

你能不能帮助我。

Answer 1

在这里使用.delegate()，如下所示：

$("#keyword").delegate(".close", "click", function (){
  $(this).parent().remove();  
});

.delegate()的工作原理是在#keyword上添加一个事件处理程序（<ul>），该事件处理程序会侦听要冒泡的事件......它适用于当前和新添加的.close它下面的元素。效率较低的.live()版本如下所示：

$(".close").live("click", function (){
  $(this).parent().remove();  
});

Answer 2

您可以将click直接分配给新创建的元素：

$("#btnadd").click(function() {
             // Made it a local variable by using "var"
            var addkey = document.getElementById("txtaddkey").value;
            if(addkey!=""){
                $('<li><span>'+addkey+'</span><span class=\"amountin\"><a href=\"#\">$0.05</a> $ <input type=\"text\" maxlength=\"5\"/></span><span class=\'close ui-icon \'></span></li>')
                    .find('.close').click(function (){
                        $(this).parent().remove();  
                    })
                    .end().appendTo('#keyword');
                $('#txtaddkey').val('');
            }
        });

或者如果有其中的几个，最好使用.delegate() in @Nick's answer。

jquery onclick不适用于追加标签

2 个答案: