jQuery：如何通过DOM准备好后在jQuery中创建的id获取元素？

Question

我是jQuery的佼佼者，今天我遇到了一个问题。

我有一个用户可以选择的应用程序列表。 要选择一个应用程序，他们必须单击一个按钮(id="add_app_#{app_id}") 。 当有人添加应用程序时，我在列出所有选定应用程序的表上创建一行。 在此行（在jQuery中创建）中，有一个按钮(id="remove_app_#{app_id}")从表中删除该应用程序。

我的问题是我不知道如何获取remove_app按钮的click事件（肯定是因为在DOM准备就绪后，它已添加到DOM中）。

虽然，我使用.on() jQuery函数...

这是我的代码：

jQuery(function() {
    $('[id^=add_app_]').click(function() {
        var app_id, version_id;
        version_id = 0;
        app_id = this.getAttribute('data-app_id');

        $("#app_versions_" + app_id + " option:selected").each(function() {
            version_id = $(this).val();
        });

        hide_app_from_selector(app_id);
        display_app_in_table(app_id, version_id);
    });

    $('[id^=remove_app_]').on('click', function() {
        // I NEVER GET HERE !
        var app_id;
        app_id = this.getAttribute('data-app_id');
        remove_app_from_table(app_id);
        display_app_in_selector(app_id);
    });
});

Answer 1

简单的答案：您使用事件委托 。

您可以通过将选择器作为第二个参数传递给jQuery的.on() 。

$( document.body ).on( 'click', '[id^=add_app_]', function() {
});

---

您应该使用closest shared parent而不是document.body来防止不必要的事件冒泡。

Answer 2

您可以使用on()方法将事件处理程序分配给动态创建的元素的祖先，该元素在首次调用该方法时就存在。 您仅通过使用$('[id^=remove_app_]').on(...)所做的工作就是将事件处理程序分配给在调用时不存在的元素。

为了解决这个问题，请找到您的[id^=remove_app_]元素的祖先，该元素在您首次分配事件处理程序并将on()分配给该元素时存在：

$('body').on('click', '[id^=remove_app_]', function() { ... });

使用此特定代码，您可以将事件处理程序委派给body （可能在调用on()函数之前存在），而不是直接将其分配给动态创建的元素。 从jQuery的on()文档中 ：

提供选择器后，事件处理程序称为“委托”。 当事件直接发生在绑定元素上时，不调用处理程序，而仅对与选择器匹配的后代（内部元素）进行调用。 jQuery使事件从事件目标一直冒泡到附加了处理程序的元素（即，最内层元素到最外层元素），并沿该路径运行与选择器匹配的任何元素的处理程序。

为了使您的代码尽可能高效，您需要将委托分配给不是动态创建的最接近的祖先，例如：

<div id="non-dynamic-container">
    ...
    <elem id="remove_app_123"></elem>
</div>

$('#non-dynamic-container').on('click', '[id^=remove_app_]', function() { ... });