Jquery为每个动态添加的选择框迭代函数答案

【问题标题】：Jquery iterate over function for each dynamically added select boxJquery为每个动态添加的选择框迭代函数
【发布时间】：2015-07-04 03:26:45
【问题描述】：

遇到一些 jquery 问题并试图弄清楚如何使用相同的函数并迭代使用 jquery.clone() 动态添加的选择框。

这是正在克隆的内容的 sn-p

<select name="expense_type" id="expense_type">
    <option value=""></option>
    <option value="daily_pay">Daily Pay</option>
    <option value="Lodge">Lodging</option>
    <option value="Meals">Meals</option>
    <option value="Mileage">Mileage</option>
    <option value="Telephone">Telephone</option>
    <option value="Expense">Expense</option>
    <option value="PaLandRecords">PA Land Records</option>
    <option value="Landex">Landex</option>
    <option value="Copies">Copies</option>
    <option value="Other">Other</option>
</select>

这是我的 jquery 代码。抱歉，我只发布了声明 i 变量的代码的 sn-p。

var i = 1;
$("#add").click(function () {
    $("#tr_clone").clone().find("input,select").each(function () {
        $(this).val('').attr("id", function (_, id) { return id + i });
    }).end().appendTo("table");
    i++;
});
$("#expense_type_" + i).change(function () {
    alert($(this).val());
});

所以基本上，一旦一个选择框被克隆，我试图让 jquery 自动更新它自己并创建一个更改事件，这样无论表单上的选择框有多少，它都会自动提醒用户新值更改后，任何帮助都会很棒。

【问题讨论】：

您不需要为克隆的元素分配唯一的 id，因为任何必需的事件处理程序都应该可以通过公共类来实现。（尽管使用委托处理程序，因此它会自动处理新元素。）

标签： javascript jquery html clone

【解决方案1】：

$("#add").click(function() {
    $("#tr_clone").clone().find("input,select").each(function() {
        $(this).val('').attr("id", function(_, id) {
            return id + i
        });
    }).end().appendTo("table");

    $("#expense_type_" + i).change(function() {
        alert($(this).val());
    });

    i++;
});

如果您想对每个选择框使用相同的功能，您可以执行以下操作

$('body').on('change', '.mySelector', function(){
    alert($(this).val());
});

【讨论】：