Выберите опцию логики для клонированного элемента

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

Вам нужно использовать live , чтобы исправить это, я думаю, поскольку ваше связывание происходит до создания клонированного элемента.

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

Answer 2

Попробуйте вместо этого:

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

Я думаю, что .toggleSlide() может вас испортить.

Также строка $('hiddenBreak').hide();, вероятно, ничего не делает, если выхотите скрыть этот div, вам нужно заменить его на $('.hiddenBreak').hide();