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

Retain jQuery functionality when buttons are added on the go

本文关键字：保留 jQuery 功能 按钮 移动 添加      更新时间：2023-09-26

我有一个列表元素块，当单击"添加"按钮时，我需要添加它。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引用页面上已经存在的元素）

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

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

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

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

尝试在动态创建的元素上使用事件.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>');
});

另外，既然可以直接附加代码，为什么还要创建一个变量呢？

相关文章：