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

Question

我有一个 RMA 表单，我可以动态添加字段，但在处理事件(如点击、更改)时遇到问题。

我使用 .appendTo("#container"); 添加字段，并使用计数器递增 NAME 参数，这样当用户点击“提交”时，我会得到“类别1:blah”“类别2:blahblah”“类别3: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 代码用于在 [类别] [子类别] [型号] 下拉列表上方显示单选按钮。这是为了让用户选择是返回还是换货。

    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>
...

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