Question

我有一个list元素块，我需要在＆＃34; Add＆＃34;单击按钮。 HTML：

<li>
    <div><h3 >User name sss updated this.
        <input type="button" value="X" class="delete"/></br></h3>
    </div>

        SOME TEXT HERE          
</li>

jQuery的：

$(".delete").click(function(){
    $(this).closest("li").slideUp();
});

$("#addPost").click(function(){
    var inData = '<li><div><h3>User name sss updated this.<input type="button" value="X" class="delete"></input></br></h3></div>';
    $("#midContent ul").append(inData+'Sarthak</li>');
});

这个块有一个删除按钮和一个附加的jQuery函数。

如果页面上已存在该块，则其工作正常。但是，当我使用jQuery append添加此块时，块正确呈现，但删除功能对新添加的块不起作用。我哪里错了？

此外，添加此块的更好方法是什么比JS代码中的硬编码更好？（只需通过使用id或class引用页面上已有的元素）

Answer 1

尝试在动态创建的元素上使用事件.on('click',function(){})。

$(".delete").on('click',function(){
    $(this).closest("li").slideUp();
});

$("#addPost").on('click',function(){
    var inData = '<li><div><h3>User name sss updated this.<input type="button" value="X" class="delete"></input></br></h3></div>';
    $("#midContent ul").append(inData+'Sarthak</li>');
});

另外，为什么在可以直接附加代码时创建变量？

Answer 2

您需要为动态创建的DOM节点委派事件。您可以委托父div或文档本身。

$(document).on('click', '.delete', function(e) { 
    //your code here
});

单击处理程序中的第二个参数是您要为其附加单击处理程序的选择器。

进一步阅读：http://learn.jquery.com/events/event-delegation/

在移动中添加按钮时保留jQuery功能

2 个答案: