jQuery $ .change函数不适用于克隆选择

Question

我有一个带有按钮的表，该按钮通过克隆最后一行在底部添加一行。 每行包含一个<select>使用不同的名称（0-9）中，所有<select>对象具有.variable_priority类。 当按下按钮时，该行被成功复制，并且我设法正确地更改了名称（10、11、12等），并且该行获得了相同的类，因为它是完美的副本。

但是，当我执行以下功能时，克隆表行会遇到问题：

$('.variable_priority').change(function() {
    var selections = new Array();
    $(".variable_priority").each(function() {
        selections.push($(this).find('option:selected').val());
    });

    // Iterating on Options of Select
    $('.variable_priority').children('option').each(function() {
        $(this).removeAttr('disabled');

        if($.inArray($(this).val(), selections) !== -1){
            if($(this).val() != 0){
                if($(this).is(':selected')){
                    // nothing
                } else {
                    $(this).attr('disabled', true);
                }
            }
        }
    });
});

每次我更改<select>的选定选项时，该函数都应运行，尽管它仅与10个原始选项一起运行。 当我更改克隆行中的选项时，不会执行此功能。 但是，如果我更改其中一个原始值，则该函数将运行，并且还将克隆行中的值添加到selections数组中。

因此，出于某种原因，代码会识别出克隆具有相同的类，但是在更改其值时它不会运行。

编辑：上面的代码的简短描述； 如果我更改了<select>的选定值，则该函数会将所有选定的选项添加到数组中，并禁用select中的每个选定选项，但选中该值本身的框中除外（如果我在“ select”中选择了“ 2”在第一个方框中，“ 2”在所有其他方框中均被禁用​​）。

Answer 1

因为您的select元素是动态的（在初始页面加载后添加到DOM，或者将其添加到DOM； 在初始事件处理程序附件之后添加到DOM），所以您需要委派change事件处理程序：

$(document).on('change', '.variable_priority', function() {

});

但是，您不希望使用document ，而是将事件处理程序附加到最接近.variable_priority静态元素。

的jsfiddle

Answer 2

我认为代码未在新克隆上执行。

此脚本在启动时加载。 它必须为每个新的子代完成。。也许添加一个新子代之后，运行专门针对该新子代的脚本。