2

我在 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);
    });
});
4

2 回答 2

3

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

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

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

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

于 2013-10-11T08:49:05.463 回答
0

您可以使用该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() { ... });
于 2013-10-11T08:49:34.240 回答