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

【问题标题】：Select option logic on a cloned element选择克隆元素上的选项逻辑
【发布时间】：2011-12-02 21:31:42
【问题描述】：

只要从我的下拉选择中选择“音量”，下面的 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>

【问题讨论】：

标签： jquery select drop-down-menu clone

【解决方案1】：

试试这个：

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

我认为那里有.toggleSlide() 可能会搞砸你。

另外，$('hiddenBreak').hide(); 行可能没有做任何事情，如果你想隐藏那个 div，你需要用 $('.hiddenBreak').hide(); 替换它

【讨论】：

如果在if 和else 块中放置断点，它们是否到达？

【解决方案2】：

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

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

【讨论】：

谢谢，但我用这个解决方案得到了相同的结果。