Jquery 为每个动态添加的 select 框迭代函数

Question

jquery 有一些问题，并试图弄清楚如何使用相同的函数并迭代 select 框，这些框是使用 jquery.clone() 动态添加的。

这是被克隆内容的片段

<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 代码。抱歉，我只 post 声明了 i 变量的代码片段。

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

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

Answer 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++;
});

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

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

Jquery 为每个动态添加的 select 框迭代函数

Jquery iterate over function for each dynamically added select box

html

javascript

jquery

clone