javascript - 修改 DOM 后 jQuery 选择器不起作用

Question

我有一个选定公司的列表，如下所示：

<div id="selected_companies">
    <div class="company">
      <a>
        <div class="delete_company"></div>
        Company One
      </a>
    </div>
    <div class="company">
      <a>
        <div class="delete_company"></div>
        Company Two
      </a>
    </div>
</div>

当单击其中一家公司时，我希望将每个.companydiv 都“移动”到一个单独的#deleted_companiesdiv 中。我正在使用 jQuery 执行此操作：

$('#selected_companies .company a').on('click', function (e) {
        /* Getting the company */
        var company_id = $(this).prev().prop('value');
        $('.form').append('<input type="hidden" name="deleted_companies[]" value="'+ company_id +'" />');

        var parent = $(this).parent();

        parent.appendTo('#deleted_companies');
        $('#deleted_companies').slideDown(300);
});

当我单击其中一家公司时，该.companydiv 移动到所需的 div ( #deleted_companies)，但是当我尝试在该 div 中到达它时，它没有按预期执行。例如，此代码不起作用：

$('#deleted_companies .company a').on('click', function (e) {
    alert('This should work.');
});

那么如何使警报起作用呢？

Answer 1

使用委托，试试这个

$('#deleted_companies').on('click', '.company a', function (e) {
    alert('This should work.');
});

这基本上是说查看#deleted_companies（在创建绑定时存在）.company a在创建此绑定以使其工作之前不一定必须存在。