修改 DOM 后 jQuery 选择器不起作用 [重复]

Posted 2023-03-05

【中文标题】修改 DOM 后 jQuery 选择器不起作用 [重复]

【英文标题】：jQuery selector is not working after modifying DOM [duplicate]

【发布时间】：2013-06-30 09:00:31

【问题描述】：

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

<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>

当点击其中一家公司时，我希望将每个 .company div“移动”到单独的 #deleted_companies div 中。我用 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);
);

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

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

那么我该如何让这个警报发挥作用呢？

【参考方案1】：

使用委托，试试这个

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

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

【讨论】：

更多关于direct vs. delegated event handlers

天才！我已经为此工作了几个小时。我想我只是不知道如何搜索它。谢谢！

很棒的链接，@RoryO'Kane，简直不敢相信这是这么简单。非常感谢！