Блог

Главная - Вопросы по программированию - Переопределение динамических элементов при использовании плагина jQuery Selectize и Bootstrap-переключатель

Переопределение динамических элементов при использовании плагина jQuery Selectize и Bootstrap-переключатель

#javascript #jquery #css #twitter-bootstrap #rerender

#javascript #jquery #css #twitter-bootstrap #перезапуск

Вопрос:

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

Каждая строка состоит из 3 элементов: флажка и 2-х полей выбора.
Как видно из скрипки, я использую jquery для клонирования строки и размещения клонированной строки после последней строки.

Все работает нормально, за исключением того, что визуально я хотел бы, чтобы флажок использовал Bootstrap-Switch http://www.bootstrap-switch.org /

И поля выбора для использования Selectize https://github.com/brianreavis/selectize.js

Теперь, когда я клонирую строку с этими неактивными плагинами, все работает. Я понятия не имею, как повторно отобразить или повторно активировать их после вставки новой строки.

Является ли это чем-то специфичным для плагина? Или какой-то универсальный для jquery? Я прочитал здесь КУЧУ ответов о подобных вещах, но, похоже, я не могу понять это правильно.

Вот фрагмент jquery:

 $adSearchForm = $('#adSearchForm');
$adSearchForm.on('click', 'button, input, select, option', function (event) {  
console.log("Button Clicked", event)
});

$('#addSearchRow').click(function(event){
    $('[data-content=adSearch-3]:first').clone().insertAfter('[data-content=adSearch-3]:last');
//  $('.searchByField,.searchOperator').selectize({refreshItems: true});
//  $('[data-toggle=switch]').bootstrapSwitch({refreshItems: true});
});

Вот скрипка, надеюсь, все в порядке. http://jsfiddle.net/CkVQr/6 /

Большое спасибо за вашу помощь. Ваше здоровье

Ответ №1:

Плагины изменяют ваш HTML-код

Есть две основные проблемы, о которых вы, возможно, не до конца осознаете в своем коде:

  1. Всякий раз, когда вы выполняете a .clone() , он просто глубоко клонирует поддерево вашего элемента DOM, но не какие-либо обработчики событий, привязанные к клонированным элементам.
  2. Ваш .selectize() плагин довольно значительно изменяет HTML вашей формы, преобразуя входные элементы в другие вещи. Поэтому всякий раз, когда вы клонируете уже преобразованную строку фильтра выбора и впоследствии хотите запустить .selectize() ее снова, этот конкретный плагин не найдет подходящих входных элементов для преобразования. Следовательно, это не сработает. Все будет выглядеть так, как должно, но не будет работать.

Что можно сделать?

Основная идея заключается в том, что всякий раз, когда вы клонируете строку фильтра поиска, вы должны клонировать свой исходный HTML, а не после того, как он был преобразован с помощью ваших плагинов.

HTML-шаблоны на помощь

Одна из возможностей заключается в том, чтобы немного изменить вашу страницу (и функциональность), поместить строку фильтра поиска в шаблон и всегда использовать ее. Когда вы создаете свою первую строку, вы должны прочитать шаблон (и кэшировать его) и добавить преобразовать его на своей странице. Когда вы добавите дополнительную строку, просто используйте тот же кэшированный шаблон и добавьте преобразуйте его снова.

HTML — шаблон

 <script id="filterRow" type="text/x-template">
    <!-- Your filter rown HTML goes in here -->
</script>

Немного Javascript

 var cachedTemplate = cachedTemplate || $("#filterRow").html();

...

$('#addSearchRow').click(function(evt) {
    var newRow = cachedTemplate.clone(); // clone for reusability
    newRow.insertAfter('[data-content=adSearch-3]:last');
    newRow.selectize();
    ...
});
Метки: