Если выпадающий список изначально задан на странице все прекрасно работает, а если он добавляется на страницу позднее, тогда плагин не срабатывает. Я так понимаю проблема в том, что код плагина в 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
Неправильная работа
Нормальная работа
Плагин меняет и добавляет элементы на страницу.
Вообще этот плагин нужен для реализации выбора тегов или создания новых
Способ решения довольно кустарный, но, думаю, это поможет создать правильную логику:
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>
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Пытаюсь настроить плагин fidvids для WordPressПлагин растягивает видео из различных соцсетей по ширине экрана
На сайте на диапазоне ниже 992px нужно изменить центр google карты
Есть JSON объект, в котором передаются такие данные: {timestamp,price}, где timestamp это число, price число с плавающей точкой