修改DOM后，jQuery选择器不工作

jQuery selector is not working after modifying DOM

本文关键字：选择器 工作 jQuery DOM 修改      更新时间：2023-09-26

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

<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.');
});

那么我该如何使警报生效呢？

使用委派，尝试此

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

这基本上是说查看.company a的#deleted_companies（在创建绑定时存在），它不一定必须在创建绑定之前存在才能工作。

相关文章：