Bootstrap-Slider теряет привязку события при замене контента - PullRequest
Новая
       14

Bootstrap-Slider теряет привязку события при замене контента

0 голосов
/ 29 мая 2019

В моем проекте я использую Bootstrap-Slider для создания слайдера диапазона на контейнере DIV. Поскольку я использую динамический контент AJAX, мне нужно заменить содержимое DIV, включающее компонент ввода ползунка. Итак, контент заменяется и перестраивается после кнопка «назад» (это история поведения HTML 5 с использованием pushstate и popstate, но здесь это не важно).

Происходит, что при замене содержимого компонент слайдера останавливается. Из моих тестов кажется, что слайдер потерял родные события, связанные с ним. Событие слушателей mouseenter, mouseleave и и mousedown отсутствуют после замены содержимого.

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

$(document).on('click','.#menu_collapsed', {} ,function(e){
...
})

Кажется, что он работает с собственными событиями DOM, но не работает с пользовательскими событиями компонента-слайдера (slideStop, slide, slideStart и т. Д.).

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

Я также заменил контент оригинальным тегом, и он работал, как показано ниже. Это нормально, потому что весь процесс повторно инициализирован.

Но когда я заменил оригинальный слайдер, сгенерированный HTML на лету, это не сработало. 

<!-- below is generated slider html generated on the fly --->
<div class="slider slider-horizontal" style="width: 220px;">
    <div class="slider-track">
    <div class="slider-selection" style="left: 0%; width: 44.4444%;"></div>
    <div class="slider-handle round" style="left: 44.4444%;"></div>
    <div class="slider-handle round hide" style="left: 0%;"></div>
</div>
<div class="tooltip top" style="top: -40px; left: 50.7778px;">
    <div class="tooltip-arrow"></div>
    <div class="tooltip-inner">Current value: 5</div></div>
    <input type="text" id="sl1" class="col-md-12" value="1" data-slider-min="1" data-="" slider-max="20" data-slider-value="5" style="">
</div>

Возможно, существует обходной путь для перезапуска исходного экземпляра. Я попытался воспроизвести поведение, используя [Fiddle] (http://jsfiddle.net/gildlrei/yxj9m4p8/84/). Некоторые пояснения к тесту примера скрипки.

На моем примере есть три кнопки, которые вы можете попробовать, как показано ниже.

1 - Сначала нажмите кнопку «Создать контент». Он получит оригинальный слайдер HTML и отобразит его внизу. Кроме того, он заменит контейнер DIV текстом «здесь ничего», удалив компонент слайдера. 2 - Нажмите кнопку «Заменить содержимое». Он вернет исходный контент и повторно отобразит компонент слайдера. В этот момент вы можете увидеть, что слайдер остановлен.
3 - Нажмите кнопку «Начать новый экземпляр слайдера». Он вызовет функцию Slider () для селектора $ ('# sl1'), пытающегося повторно инициализировать. На данный момент вы можете увидеть два компонента с новым рабочим.

Спасибо за любые предложения.

...