проблема при клонировании — jquery

#javascript #jquery #events #clone

#javascript #jquery — jquery — запрос #Мероприятия #клонировать #jquery

Вопрос:

я использую этот плагин

Теперь я делаю способ клонирования выпадающего списка select. Кнопка для добавления клонированных разделов. Итак, у пользователя есть начальный выпадающий список, но он может добавить больше. Div клонирован.

Основная проблема заключается в том, что когда я клонирую div, выпадающий список связан с начальным выпадающим списком, а не с новым, то есть клонированным. Результат таков: все выпадающие списки новых клонированных divs имеют событие для открытия выбора, связанного с первым.

введите описание изображения здесь

Скрипт для вызова подключаемого модуля

 <script language="javascript" type="text/javascript">
$(document).ready(function() {
        $(".mydds").msDropDown();
})

</script>
  

скрипт для клонирования

 <script type="text/javascript">
    $(document).ready(function() {
        $('#adicionar').live('click', function(){
            var num = $('.linguas').length;
            var newNum = new Number(num   1);

            var newElem = $('#copiar'   num).clone(true).prop('id', 'copiar'   newNum);

            newElem.children(':text').prop('name', "myformdata[languages"   newNum   "]").prop('languages', 'languages'   newNum).val('');
            $('#copiar'   num).after(newElem);
            $('#apagar').prop('disabled', '');

        });

</script>
  

Есть идеи по решению проблемы?
В принципе, я думаю, что событие, связанное с выпадающим списком, не копируется…
Спасибо

Ответ №1:

Предполагая, что у вас есть только один выпадающий список на клонированный элемент, вы можете использовать

 $('#adicionar').live('click', function(){
    var num = $('.linguas').length;
    var newNum = new Number(num   1);

    var newElem = $('#copiar'   num).clone(true, true).attr('id', 'copiar'   newNum);

    var id = newElem.find('select').msDropDown().data('dd').get('id');

    newElem.find('[id]').each(function(){
        $(this).attr('id',this.id.replace(id,'customid_'   newNum,'g') );
    });


    $('#copiar'   num).after(newElem);

    newElem.find('select').msDropDown();
});
  

Проблема в том, что плагин присваивает идентификатор исходному select элементу и использует этот идентификатор для создания других элементов, а также для ссылки на связанные с ним select .

Вам нужно будет изменить все эти идентификаторы, а также ссылку.. (приведенный выше код делает именно это ..)

демо http://jsfiddle.net/gaby/CXBZR/3 /

Комментарии:

1. chrome, safari и IE8 не работают. только в firefox. Почти 🙂

2. @user455318, обновил код ( сделал его более подробным ) и демонстрационный, и, похоже, теперь он работает во всех браузерах…

Ответ №2:

В вашем скрипте, который вы вызываете .clone(true) . Этот true параметр клонирует события и данные.

Из API

.clone( [ withDataAndEvents ] )
withDataAndEvents: логическое значение, указывающее, следует ли копировать обработчики событий вместе с элементами. Начиная с jQuery 1.4, данные элемента также будут скопированы.

Если вы удалите это или установите для него значение false, это остановит клонирование событий в ваши новые divs.

Комментарии:

1. но мне нужно клонировать события. проблема в том, что div клонирован, но события нет. Если я сделаю то, что вы предлагаете, сработает только первый выпадающий список. Мне нужно клонировать div и событие.

2. Хорошо, я в замешательстве. скопировано событие или нет? В вашем первоначальном вопросе кажется, что вы говорите, что он скопирован.

3. @user455318: Проблем нет. Извините, я неправильно понял вопрос.