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

Question

我正在尝试使用 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>

这是缩短的测试脚本：

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

这是我用完整代码制作的 JSfiddle：

http://jsfiddle.net/w8oatxxd/

如您所见，一旦选择了“大小”，下拉菜单就会被克隆，并且第一个下拉菜单在克隆集中起作用，但级联中断并且克隆集中的第二个下拉列表不会填充。我一直在到处寻找，似乎无法弄清楚这一点。这可能是一个非常简单的解决方案，但我尝试过的任何方法都没有奏效。

请帮忙！

Answer 1

您正在尝试对尚不存在的 DOM 元素使用侦听器。您需要使用 jQuery .on 或在克隆它们之后将侦听器添加到新的 DOM 元素。与其做$.each($('.brand')...，不如试着做$('body').on('change','.brand',function(){。应该工作差不多。我会弄乱你的小提琴。

http://jsfiddle.net/w8oatxxd/1/

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

$('body').on('change','.brand', function() {

Answer 2

可能是这样的：http://jsfiddle.net/OxyDesign/wndhqt1s/

JS

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