[英]jQuery $.change function not working with cloned select
I have a table with a button that adds a row to the bottom by cloning the last row. 我有一个带有按钮的表,该按钮通过克隆最后一行在底部添加一行。 Each row contains a
<select>
with a different name (0-9), all <select>
objects have the .variable_priority
class. 每行包含一个
<select>
使用不同的名称(0-9)中,所有<select>
对象具有.variable_priority
类。 When pressing the button, the row gets copied successfully and I manage to change the name correctly (10, 11, 12, etc.), and the row gets the same class since it is a perfect copy. 当按下按钮时,该行被成功复制,并且我设法正确地更改了名称(10、11、12等),并且该行获得了相同的类,因为它是完美的副本。
However, when I execute the following function, I encounter problems with cloned table rows: 但是,当我执行以下功能时,克隆表行会遇到问题:
$('.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);
}
}
}
});
});
The function should run each time I change the selected option of a <select>
, though it only runs with the 10 original ones. 每次我更改
<select>
的选定选项时,该函数都应运行,尽管它仅与10个原始选项一起运行。 This function is not executed when I change the option in a cloned row. 当我更改克隆行中的选项时,不会执行此功能。 However, if I change the value in one of the originals, the function runs and it also adds the values from the cloned rows to the
selections
array. 但是,如果我更改其中一个原始值,则该函数将运行,并且还将克隆行中的值添加到
selections
数组中。
So for some reason, the code recognizes that the clones have the same class, but it doesn't run when changing their values. 因此,出于某种原因,代码会识别出克隆具有相同的类,但是在更改其值时它不会运行。
EDIT: short description of the code above; 编辑:上面的代码的简短描述; if I change the selected value of a
<select>
,the function will add all selected options to an array and disable every selected option in the selects, except in the box where the value itself is selected (if I select '2' in the first box, '2' gets disabled in all other boxes). 如果我更改了
<select>
的选定值,则该函数会将所有选定的选项添加到数组中,并禁用select中的每个选定选项,但选中该值本身的框中除外(如果我在“ select”中选择了“ 2”在第一个方框中,“ 2”在所有其他方框中均被禁用)。
Because your select
element is dynamic (It is added to the DOM after the initial page load, or to be specific; after the initial event handler attachment) you will need to delegate your change
event handler: 因为您的
select
元素是动态的(在初始页面加载后添加到DOM,或者将其添加到DOM; 在初始事件处理程序附件之后添加到DOM),所以您需要委派change
事件处理程序:
$(document).on('change', '.variable_priority', function() {
});
Rather than use document
though, you'll want to attach the event handler to the closest static element to .variable_priority
. 但是,您不希望使用
document
,而是将事件处理程序附加到最接近.variable_priority
静态元素。
I think the code isn't executed on the new clones. 我认为代码未在新克隆上执行。
This script is loaded on start. 此脚本在启动时加载。 It has to do it over for each new children.. Maybe after adding a new, run this script specific for that new one.
它必须为每个新的子代完成。。也许添加一个新子代之后,运行专门针对该新子代的脚本。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.