javascript – 修改DOM 后jQuery选择器无法正常工作

参见英文答案 > Events triggered by dynamically generated element are not captured by event handler                                    5个
>            How to create click event for specific link in a jQuery listview.                                    6个
我有一个选定的公司列表,如下所示：

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

那么如何使该警报工作？

解决方法:

使用委托,试试这个

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

这基本上是为了查看.deany的#deleted_companies(在创建绑定时存在).company a在创建此绑定之前不一定必须存在.

标签：dom-manipulation,javascript,jquery,jquery-selectors,javascript-events
来源： https://codeday.me/bug/20190825/1720975.html