javascript - .on(click,function) 不适用于动态添加的内容

Question

这个问题已经有答案了:

Event binding on dynamically created elements? (23 个回答)

已关闭 8 年前。

我的动态帖子是通过 .load() 添加的，它们会这样进入 DOM:

<div class="post">
    <h2>Basic Info</h2><button class="closer">X</button>
            <div class="innerPost">
               <h5>Notes:</h5>
                   <p>Lorem ipsum dolor sit amet.</p>
            </div>
 </div>

我的 jQuery 删除帖子适用于页面上的静态第一个帖子，但不适用于新添加的动态帖子。这是 jQuery:

     $(".closer").on('click', function() {
         $(this).parent().remove();
     });

我一直在尝试不同的选择器并查看其他人的类似问题，但似乎仍然无法使其工作。非常感谢任何帮助:)

Answer 1

这是因为当选择器运行时，元素不在 DOM 中。使用event delegation.

$(document).on('click', ".closer", function() {
    $(this).parent().remove();
});