#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
.
Вам нужно будет изменить все эти идентификаторы, а также ссылку.. (приведенный выше код делает именно это ..)
Комментарии:
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: Проблем нет. Извините, я неправильно понял вопрос.