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

【问题标题】：jQuery : How to get an element by id which has been created in jQuery after DOM ready?jQuery：如何在 DOM 准备好后通过 id 获取在 jQuery 中创建的元素？
【发布时间】：2013-10-19 06:48:03
【问题描述】：

我在 jQuery 的美妙世界中，今天我遇到了一个问题。

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

我的问题是我不知道如何获取 remove_app 按钮的点击事件（肯定是因为它是在 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);
    });
});

【问题讨论】：

标签： javascript jquery html dom

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

您可以使用on() 方法将事件处理程序分配给第一次调用该方法时存在的动态创建元素的祖先。您只需使用$('[id^=remove_app_]').on(...) 所做的就是将事件处理程序分配给调用时不存在的那个元素。

要纠正此问题，请找到您的 [id^=remove_app_] 元素的祖先，该元素在您首次分配事件处理程序并将 on() 分配给该元素时存在：

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

使用此特定代码，您将事件处理程序委托给body（它可能在调用您的on() 函数之前存在），而不是将其直接分配给您动态创建的元素。来自jQuery's on() documentation：

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

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

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

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

【讨论】：