javascript - 在 .html() 被触发后做一些事情

Question

我将页面上另一个 div 中的 HTML 注入(inject)到一个 div 中，然后添加一个 .show 类，如下所示:

var $boxItem = $('.box-grid__item'),
    $htmlData = $($boxItem).find('.box-grid__item-content').html();
$boxItem.click(function () {
    $('.box-grid__item-content-popup').html($htmlData).addClass('show');
});

被注入(inject)的 HTML 是:

<div class="close-btn" aria-label="Close">
    <span></span>
    <span></span>
</div>
<h2 class="box-grid__item-content-heading">Name and Surname</h2>
<p class="box-grid__item-content-title">Title</p>
<p class="box-grid__item-content-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

这按预期工作，但现在我想删除 .show。我已经试过了，但它没有触发:

$('.close-btn').click(function () {
    $('.box-grid__item-content-popup').removeClass('show');
});

任何帮助将不胜感激;)

Answer 1

由于您是动态插入 HTML，因此您的事件处理程序应该类似于:

$('.box-grid__item-content-popup').on("click", '.close-btn', function () {
    $('.box-grid__item-content-popup').removeClass('show');
})

这意味着冒泡到 .box-grid__item-content-popup 的事件将被捕获，但处理程序将在 .close-btn 上触发事件时触发> 或其后代之一。

引用:参见委托(delegate)事件部分 http://api.jquery.com/on/