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() {
});

您可以使用document.body来代替closest shared parent，以防止不必要的事件冒泡。

Answer 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() { ... });

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

2 个答案: