选择克隆元素上的选项逻辑

Question

每当从我的下拉选择中选择“volume”时，下面的 JQuery 就会显示一个隐藏的 div。问题是，当我克隆包装下拉列表的 div 时，逻辑仅适用于原始 div，隐藏的 div 显示在原始和克隆的 div 下方。

当我从克隆元素中选择“卷”时，没有任何反应。

$('.hiddenBreak').hide();

$('select.discount').change(function(){
    if ($('.discount').val() == 'volume') {
            $('.hiddenBreak').slideToggle('medium');
        } else {
            $('.hiddenBreak').slideUp('fast');
        };
});

<div>
    <select class="discount">
       <option value="volume">Volume</option>
       <option value="nothing">Nothing</option>
    </select>
</div>

<div class="hiddenBreak">
  Message goes here
</div>

Answer 1

试试这个：

if ($('.discount').val() == 'volume') {
        $('.hiddenBreak').slideDown('medium');
    } else {
        $('.hiddenBreak').slideUp('fast');
    }

我认为里面有 .toggleSlide() 可能会让你感到困惑。

另外， $('hiddenBreak').hide(); 行可能没有执行任何操作，如果您想隐藏该 div，则需要将其替换为 $('. hiddenBreak').hide();

Answer 2

您需要使用 live 来解决此问题，我认为您的绑定发生在创建克隆元素之前。

$('select.discount').live('change', function() {
    if ($('.discount').val() == 'volume') {
            $('.hiddenBreak').slideToggle('medium');
        } else {
            $('.hiddenBreak').slideUp('fast');
        };
});