jQuery 处理动态添加元素的事件答案

【问题标题】：jQuery handling events on dynamically added elementsjQuery 处理动态添加元素的事件
【发布时间】：2011-06-04 05:56:58
【问题描述】：

我有一个 RMA 表单，我可以动态添加字段，但无法处理事件（如点击、更改）。

我通过使用 .appendTo("#container"); 添加字段并使用计数器增加 NAME 参数，这样当用户点击提交时——我会得到 'Category1: blah' 'Category2: blahblah' 'Category3: something_else'等。

问题是当我动态添加更多字段（如下拉框）时，事件不会跟随。我有 3 个下拉菜单 [类别] [子类别] [模型]。当我选择一个类别时：

jQuery('#cat').bind("change", function()
    {
        jQuery('#subcat').empty();
        jQuery('#subcat').attr('disabled', 'disabled');
        jQuery('#model').empty();
        jQuery('#model').attr('disabled', 'disabled');

        LoadSeries(jQuery(this).val()); // I do a .removeAttr('disabled'); in here for #subcat

    });

在上面的代码中，我尝试添加 jQuery('#cat'+counter).bind("change", function() { ...，但我认为只有在更改 [类别] 并同时点击添加按钮时才会触发该事件。

我尝试使用 .live，但我不确定如何让它与具有不同类/名称参数（cat2、cat3、cat4、cat5...）的添加元素一起使用

我还需要单独的功能吗？（LoadSeries2、LoadSeries3 等）添加的字段数量？

任何建议表示赞赏。

编辑：一些 HTML 代码在 [category] [subcategory] [model] 下拉列表上方显示单选按钮。这是供用户选择是退货还是换货。

    newTextBoxDiv.after().html('
    <div class="item'+counter+'"><br/>
    <table width="820" border=1 cellspacing="0" cellpadding="0" align="center" style="border: 1px; border-color: #000;">
      <tr>
         <td>
            <div align="center" style="font-size: 14px;">
            <input type="radio" class="radioBtn'+counter+'" name="Return_Exchange'+counter+'" value="Return" selected="selected">Return
            <input type="radio" class="radioBtn'+counter+'" name="Return_Exchange'+counter+'" value="Exchange">Exchange</div>
...

【问题讨论】：

如果可能的话，你能显示一些 HTML 吗？我知道有很多动态创作正在进行。
@hunter HTML 非常很长，但这里有一些...这是 [category] [subcategory] [model] 的顶部，供用户使用指明是退货还是换货。

标签： jquery forms dynamic webforms bind

【解决方案1】：

您可以使用live() 方法，或者在您的情况下使用delegate() 方法可能是最好的。结合starts-with selector (^=) 你应该很高兴......

$("#container").delegate("[id^='cat']", "change", function() {
    $("#subcat, #model").empty().attr("disabled", true);
    LoadSeries($(this).val());
});

使用on的jQuery

$("#container").on("change", "[id^='cat']", function() {
    $("#subcat, #model").empty().attr("disabled", true);
    LoadSeries($(this).val());
});

【讨论】：

我不知道delegate()！谢谢你的花絮。 :)
对于当前版本的 jQuery 是否有类似的解决方案，因为 delegate() 和 live() 已被排除在外，而 on() 似乎没有将事件绑定到添加的元素未来。 jsfiddle.net/9C4Kb
@jegesh 添加了一个使用on 的示例。 on 将适用于未来的元素，因为它将更改事件应用于 #container 元素
这里非常需要强调的是，on() 的未来应用只有在绑定到父元素，然后用选择器过滤时才有效。这就是我不明白的一点，并被挂断了。

【解决方案2】：

我会使用一个额外的类专门用于需要绑定到此事件等的项目......

<input class="cat3 eventClass" />

然后只需使用.live() 将任何现有或未来的$('.eventClass') 元素绑定到事件

【讨论】：

【解决方案3】：

您可以将开始选择器与 live 一起使用试试这个：

jQuery('[id^=cat]').live("change", function ()
{
    var $this = $(this);
    var id = this.id.replace(/[^0-9]/, "");
    jQuery('#subcat' + id).empty();
    jQuery('#subcat' + id).attr('disabled', 'disabled');
    jQuery('#model' + id).empty();
    jQuery('#model' + id).attr('disabled', 'disabled');
    LoadSeries(jQuery(this).val()); // I do a .removeAttr('disabled'); in here for #subcat      
});

【讨论】：