Не работает выпадающий список плагина Chosen при динамическом добавлении выпадающего списка

253

27 января 2018, 00:40

Если выпадающий список изначально задан на странице все прекрасно работает, а если он добавляется на страницу позднее, тогда плагин не срабатывает. Я так понимаю проблема в том, что код плагина в 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

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

Нормальная работа

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

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

Answer 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>