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

Question

我有一个RMA表格，可以动态添加字段，但是在处理事件（如点击、更改）方面遇到了问题。

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

问题在于，当我动态添加更多字段（如下拉框）时，事件无法跟随。我有三个下拉框 [category] [subcategory] [model]。当我选择一个类别时：

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() { ...但我认为只有在我同时更改[category]并按下添加按钮时才会触发该事件。

我尝试使用.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>
...

- mastofact

---

你能展示一些 HTML 代码吗？如果可以的话。我知道有很多动态创建的东西。 - hunter

@hunter，HTML代码非常冗长，但这是其中的一部分...这是在[类别][子类别][型号]之上，供用户指示是退货还是换货。 - mastofact

Answer 1

您可以使用live()方法，或者在您的情况下，delegate()方法可能是最好的选择。结合使用starts-with selector（^=），您应该可以顺利进行...

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

---

使用jQuery的on方法

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

- hunter

---

我不知道delegate()！谢谢你的提示。 :) - adamjford

有没有类似的解决方案适用于当前版本的jQuery，因为delegate()和live()已经被淘汰了，而on()似乎不能绑定未来添加的元素的事件。http://jsfiddle.net/9C4Kb/ - ygesher

@jegesh添加了一个使用on的示例。由于它将更改事件应用于#container元素，因此on将适用于未来的元素。 - hunter

强调一下，将on()方法应用于父元素并使用选择器进行过滤才是其有效的未来应用。这就是我之前没有理解清楚的关键点，让我感到困惑。 - ygesher

Answer 2

您可以使用以 starts with 选择器和 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      
});

- Chandu

Answer 3

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

<input class="cat3 eventClass" />

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

- jondavidjohn