Javascript 如何使jQuery函数在克隆的元素上执行？

我正在尝试使用jQuery构建一个带有层叠下拉列表的页面，其中一旦当前集合中的最后一个下拉列表发生更改，就会创建一组克隆的下拉列表。我希望这个过程能持续10次，但我一直被第二个级联集卡住，无法工作

下面是我正在测试的HTML标记的截断版本：

<div class="cascadeDrops cascade-drops-0">
<label class="page1">Brand</label>
<div class="tooltips" title="Please select the brand.">
    <select class="brand" id="brand" name="brand" placeholder="Brands">
        <option value="">Select Brand</option>
        <option value="22 Days Nutrition">22 Days Nutrition</option>
        <option value="360CUT">360CUT</option>
        <option value="4 Dimension Nutrition">4 Dimension Nutrition</option>
    </select>
</div>
<br />
<br />
<label class="page1">Product</label>
<div class="tooltips" title="Please select the product.">
    <select class="products" id="products" name="products" placeholder="Products" disabled>
        <option value="">Select Product</option>
    </select>
</div>
<br />
<br />
<label class="page1">Size</label>
<div class="tooltips" title="Please select the size.">
    <select class="size" id="size" name="size" placeholder="Size" disabled>
        <option value="">Select Size</option>
    </select>
</div>

烙印
精选品牌
22天营养
360切
四维营养




产品
精选产品




大小
选择大小

以下是缩短的测试脚本：

jQuery(function($) {
var products = {
    '22 Days Nutrition': ['Select Product', 'Plant Protein Power', 'Protein Bars', 'Vegan Energy Bars'],
    '360CUT': ['Select Product', '360INTRA', '360LEAN', '360POST', '360PRE', '360SPORT', '360TEST'],
    '4 Dimension Nutrition': ['Select Product', 'Beta Alanine', 'CLA 1250', 'Creatine', 'Men\'s Pro-Vita', 'Omega-3 Plus', 'Pure Garcinia Cambogia Extract', 'Raspberry Ketone Green Coffee Bean', 'Yohimbe Bark', 'Yohimbine HCL'],
},
sizes = {
    '360INTRA': ['Select Size', '438 Grams'],
    '360LEAN': ['Select Size', '90 Capsules'],
    '360POST': ['Select Size', '1296 Grams'],
    '360PRE': ['Select Size', '640 Grams'],
    '360SPORT': ['Select Size', '384 Grams'],
    '360TEST': ['Select Size', '180 Capsules'],
    'Beta Alanine': ['Select Size', '100 Capsules', '180 Capsules'],
    'CLA 1250': ['Select Size', '120 Softgels', '180 Softgels', '90 Softgels'],
    'Creatine': ['Select Size', '100 Grams', '500 Grams', '1000 Grams'],
    'Men\'s Pro-Vita': ['Select Size', '2 Caplets'],
    'Omega-3 Plus': ['Select Size', '120 Softgels'],
    'Plant Protein Power': ['Select Size', '15 Servings', '22 Servings'],
    'Protein Bars': ['Select Size', '1 Bar', '12 Bars'],
    'Pure Garcinia Cambogia Extract': ['Select Size', '90 Capsules'],
    'Raspberry Ketone Green Coffee Bean': ['Select Size', '60 Capsules'],
    'Vegan Energy Bars': ['Select Size', '1 - 50g Bar', '12 - 50g Bars'],
    'Yohimbe Bark': ['Select Size', '100 Capsules'],
    'Yohimbine HCL': ['Select Size', '60 Capsules', '90 Capsules'],
}

$.each($('.brand'), function() {
    $(this).change(function() {
        var $products = $(this).closest('.cascadeDrops').find('.products');

        var brand = $(this).val(), prdcts = products[brand] || [];

        var html = $.map(prdcts, function(prdct){
            return '<option value="' + prdct + '">' + prdct + '</option>'
        }).join('');
        $products.html(html).removeAttr('disabled');
    });
});

$.each($('.products'), function() {
    $(this).change(function() {
        var $size = $(this).closest('.cascadeDrops').find('.size');

        var product = $(this).val(), szs = sizes[product] || [];

        var html = $.map(szs, function(sz){
            return '<option value="' + sz + '">' + sz + '</option>'
        }).join('');
        $size.html(html).removeAttr('disabled');
    });
});

var cls = $('.cascadeDrops').attr('class'), i = 0;
var newRow = $('.cascadeDrops').clone().attr('class', cls.replace(/cascade\-drops\-[0-9]/, 'cascade-drops-' + (i+1)));

$.each($('.size'), function() {
    $(this).change(function () {
        $(this).closest('.cascadeDrops').after(newRow);
    });
});
});

jQuery（函数（$）{
var乘积={
“22天营养”：[“精选产品”、“植物蛋白粉”、“蛋白棒”、“纯素能量棒”]，
“360CUT”：[“选择产品”、“360INTRA”、“360LEAN”、“360POST”、“360PRE”、“360SPORT”、“360TEST”]，
“四维营养”：[“精选产品”、“β-丙氨酸”、“CLA 1250”、“肌酸”、“男士维他命原”、“欧米茄-3 Plus”、“纯藤黄提取物”、“覆盆子酮绿咖啡豆”、“育亨贝树皮”、“盐酸育亨宾”]，
},
尺寸={
“360INTRA”：[“选择大小”，“438克]，
“360LEAN”：[“选择大小”，“90粒”]，
“360POST”：[“选择大小”，“1296克]，
“360PRE”：[“选择尺寸”，“640克]，
“360SPORT”：[“选择尺寸”，“384克]，
“360TEST”：[“选择大小”，“180粒”]，
“β-丙氨酸”：[选择大小”，“100粒”，“180粒]，
“CLA 1250”：[“选择尺寸”、“120软凝胶”、“180软凝胶”、“90软凝胶”]，
“肌酸”：[“选择大小”，“100克”，“500克”，“1000克]，
“男士个人简历”：[“选择尺码”，“2个小帽]，
“Omega-3 Plus”：[“选择尺寸”，“120软胶囊]，
“植物蛋白粉”：[选择大小”，“15份”，“22份]，
‘蛋白质条’：[‘选择大小’、‘1条’、‘12条’]，
“纯藤黄提取物”：[“选择大小”，“90粒”]，
“覆盆子酮绿咖啡豆”：[“选择大小”，“60粒”]，
“纯素能量棒”：[选择尺寸”，“1-50克能量棒”，“12-50克能量棒]，
“育亨贝树皮”：[“选择大小”，“100粒”]，
‘盐酸育亨宾’：[‘选择大小’、‘60粒’、‘90粒’，
}
$.each（$（'.brand'），function（）{
$（this）.change（function（）{
var$products=$（this）.closest（'.cascadeDrops'）.find（'.products'）；
var brand=$（this.val（），prdcts=products[brand]| |[]；
var html=$.map（prdcts，函数（prdct）{
返回“”+prdct+“”
}).加入（“”）；
$products.html（html）.removeAttr（'disabled'）；
});
});
$.each（$（'.products'），function（）{
$（this）.change（function（）{
var$size=$（this）.closest（'.cascadeDrops'）。find（'.size'）；
var product=$（this.val（），szs=size[product]| |[]；
var html=$.map（szs，函数（sz）{
返回“”+sz+“”
}).加入（“”）；
$size.html（html）.removeAttr（'disabled'）；
});
});
var cls=$（'.cascadeDrops'）.attr（'class'），i=0；
var newRow=$（'.cascadeDrops'）.clone（）.attr（'class'，cls.replace（/cascade \-drops \-[0-9]/，'cascade drops-'+（i+1））；
$.each（$（'.size'），function（）{
$（此）.change（函数（）{
$（this）.最近（'.cascadeDrops'）。在（newRow）之后；
});
});
});

下面是我用完整代码制作的JSFIDLE：

正如您所看到的，一旦选择了大小，下拉列表就会被克隆，并且第一个下拉列表在克隆集中工作，但是级联中断，克隆集中的第二个下拉列表不会填充。我到处都在找，似乎找不出答案。这可能是一个非常简单的解决方案，但我尝试过的方法都不管用

---

请帮忙

您正在尝试对尚不存在的DOM元素使用侦听器。您需要在上使用jQuery

.on，或者在克隆之后将侦听器添加到新的DOM元素中。不要做
$。每个（$（'.brand'）…
只要试着做
$（'body'）。在（'change'，'.brand'，function（）{
）上应该也一样。我来摆弄你的小提琴


我认为您可能需要查看您的
newRow
JS以了解命名问题，但这回答并修复了您的问题

$（'body'）。on（'change'，'brand'，function（）{
可能是这样的：

JS

var maxRows=9，
currentRow=0，
克隆=$（'.cascadeDrops'）.clone（）；
$（'body'）.on（'change'，'brand'，function（））{
var$products=$（this）.closest（'.cascadeDrops'）.find（'.products'）；
var brand=$（this.val（），
prdcts=产品[品牌]| |[]；
var html=$.map（prdcts，函数（prdct）{
返回“”+prdct+“”
}).加入（“”）；
$products.html（html）.removeAttr（'disabled'）；
});
$（'body'）.on（'change'，'products'，function（）{
var$size=$（this）.closest（'.cascadeDrops'）。find（'.size'）；
var product=$（this.val（），szs=size[product]| |[]；
var html=$.map（szs，函数（sz）{
返回“”+sz+“”
}).加入（“”）；
$size.html（html）.removeAttr（'disabled'）；
});
$（'body'）.on（'change'，'size'，function（））{
如果（当前行<最大行）{
var parentRow=$（this）.closest（'.cascadeDrops'），
cls=parentRow.attr（'class'），
newRow=clone.clone（）.attr（'class'，cls.replace（/cascade \-drops \-[0-9]/，'cascade drops-'+（++currentRow））；
parentRow.after（newRow）；
}
});
这看起来像是一个问题而不是事件委派，为什么不将
true
传递给
.clone（）
这样也可以克隆事件和数据吗？感谢您的快速回复！这确实解决了第二组级联下拉列表的问题，但一旦我选择了第二个产品的大小，其中一个集合就消失了，而不是创建第三个。对。这是一个与此无关的不同问题。我认为这与此有关h此行
$（this）.最近（'.cascadeDrops'）。在（newRow）之后；
以及
newRow
的值是多少。
var maxRows = 9,
    currentRow = 0,
    clone = $('.cascadeDrops').clone();

$('body').on('change', '.brand', function() {
    var $products = $(this).closest('.cascadeDrops').find('.products');

    var brand = $(this).val(),
        prdcts = products[brand] || [];

    var html = $.map(prdcts, function(prdct){
        return '<option value="' + prdct + '">' + prdct + '</option>'
    }).join('');
    $products.html(html).removeAttr('disabled');
});

$('body').on('change', '.products', function() {
    var $size = $(this).closest('.cascadeDrops').find('.size');

    var product = $(this).val(), szs = sizes[product] || [];

    var html = $.map(szs, function(sz){
        return '<option value="' + sz + '">' + sz + '</option>'
    }).join('');
    $size.html(html).removeAttr('disabled');
});

$('body').on('change', '.size', function() {
    if(currentRow < maxRows){
        var parentRow = $(this).closest('.cascadeDrops'),
            cls = parentRow.attr('class'),
            newRow = clone.clone().attr('class', cls.replace(/cascade\-drops\-[0-9]/, 'cascade-drops-' + (++currentRow)));

        parentRow.after(newRow);
    }
});