1

Если выпадающий список изначально задан на странице все прекрасно работает, а если он добавляется на страницу позднее, тогда плагин не срабатывает. Я так понимаю проблема в том, что код плагина в js выполняется только при загрузке страницы, как можно пов тор запустить код плагина при динамическом добавление выпадающего списка?

Список добавляется так по нажатию кнопки

  var div = $('<div/>', {'class': 'DynamicExtraField' + s
                }).appendTo($('#DynamicExtraFieldsContainer' + s));
$("    <select id='bears2' data-placeholder='Выберете тэги...' class='chosen-select'  multiple tabindex='4'><option value=''></option><option value='Привет'>Привет</option></select>").appendTo(div);

Код плагина js

https://harvesthq.github.io/chosen/chosen.jquery.js

Неправильная работа Неправильная работа

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

Плагин меняет и добавляет элементы на страницу.

Вообще этот плагин нужен для реализации выбора тегов или создания новых введите сюда описание изображения

4
  • почему его не активировать плагин, сразу после того, как появляется список, например привязав его к какому-то событию ?
    – NeedH8
    25 янв 2018 в 10:33
  • @NeedHate в том и вопрос как его активировать файл плагина при добавлении списка?
    – Zoidberg
    25 янв 2018 в 11:02
  • а как список добавляется? код?
    – NeedH8
    25 янв 2018 в 11:28
  • @NeedHate добавил
    – Zoidberg
    25 янв 2018 в 11:37

1 ответ 1

1

Способ решения довольно кустарный, но, думаю, это поможет создать правильную логику:

const button = document.querySelector('button');
const newPlaceForSelect = document.querySelector('.newplaceforselect');
const h3 = document.querySelector('h3');

const newSelect = document.createElement('select');
newSelect.innerHTML = `
						<option value="United States">United States</option>
						<option value="United Kingdom">United Kingdom</option>
						<option value="Afghanistan">Afghanistan</option>
					`;


button.addEventListener('click', () => {
	newPlaceForSelect.appendChild(newSelect);
	$(newSelect).chosen();
})
* {
	box-sizing: border-box;
}
.wrapper {
	padding: 2rem;
}

.newplaceforselect {
	border: 1px solid black;
	padding: 2rem;
}
<link href="https://harvesthq.github.io/chosen/chosen.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://harvesthq.github.io/chosen/chosen.jquery.js"></script>
<div class="wrapper">
	<button>Add featured select</button>
	<h3>After this block will be added new Select block</h3>
	<div class="newplaceforselect"></div>
</div>

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.