在克隆元素上選擇選項邏輯

Question

只要從我的下拉列表中選擇「卷」，下面的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'); 
     }; 
});