Component is losing mouse events after replace content with AJAX

[gilsondelrei]

Hi all.
I'm experiencing a problem with losing events when replacing content from ajax. Well, it isn't an ajax problem, but i have some dynamic contents and need replace the html slider tag when i update the container DIV with other informations.

It's my process:
1 - First i get the original content of container including the bootstrap-slider component generated tags. The content is like sample below. Its my container_recovered_content

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

2 - After i call a ajax process and replace all components on my DIV container (not in example) with new content.
3 - User click on back button and the original content (item 1) is recovered and replaced in place.

$("#container').html(container_recovered_content).

at now the slider component is rendered, but component slider is freezed. In other words, it doesn't response for any mouse events. 

I have observed on Chrome that after replaced the content the mouse events initially binded was unbinded on component.

Tests:
I have generated a Fiddle (http://jsfiddle.net/gildlrei/yxj9m4p8/84/) and some details to execute the fiddle. It's not ajax example, but enough to evidence the problem.

On my sample test there are three buttons that you can try in sequence as below.

1 - First click on [generate content] button. It will got the original slider html generated and display it on the bottom. Additionally it will replace the container DIV with the text "nothing here" erasing the slider component.

2 - Click on [replace content] button. It will return the original content and re-rendering the slider component. At this point you can see that slider is freezed.

3 - Click on [start new instance of Slider] button. It will call the Slider() function on my selector slider $('#sl1') trying to reinitialize it. At this point you can see two components, the last one is working.

One last note about this
Trying to delegate the events to document DOM like below seems not work. It has work with other native events but not with slider.

> $(document).on('slide slideStop','#slide_distance', function (e) {
...
});

Try reinitialize the component Slider using the Slider() function has generated a new instance (duplicate) component on DIV.

$(#sl1).Slider({...})

Thanks any suggestions

[seiyria]

Have you tried to call destroy on the slider before re-initializing it? Kyle Kemp / Web Developer 920-215-1371/ kyle@seiyria.com http://seiyria.com

…

On Wed, May 29, 2019 at 5:14 PM Gilson DElrei ***@***.***> wrote: Hi all. I'm experiencing a problem with losing events when replacing content from ajax. Well, it isn't an ajax problem, but i have some dynamic contents and need replace the html slider tag when i update the container DIV with other informations. It's my process: 1 - First i get the original content of container including the bootstrap-slider component generated tags. The content is like sample below. Its my *container_recovered_content* <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> 2 - After i call a ajax process and replace all components on my DIV container (not in example) with new content. 3 - User click on back button and the original content (item 1) is recovered and replaced in place. $("#container').html(*container_recovered_content*). at now the slider component is rendered, but component slider is freezed. In other words, it doesn't response for any mouse events. I have observed on Chrome that after replaced the content the mouse events initially binded was unbinded on component. *Tests:* I have generated a Fiddle (http://jsfiddle.net/gildlrei/yxj9m4p8/84/) and some details to execute the fiddle. It's not ajax example, but enough to evidence the problem. On my sample test there are three buttons that you can try in sequence as below. 1 - First click on [*generate content*] button. It will got the original slider html generated and display it on the bottom. Additionally it will replace the container DIV with the text "nothing here" erasing the slider component. 2 - Click on [*replace content*] button. It will return the original content and re-rendering the slider component. At this point you can see that slider is freezed. 3 - Click on [*start new instance of Slider*] button. It will call the Slider() function on my selector slider *$('#sl1')* trying to reinitialize it. At this point you can see two components, the last one is working. *One last note about this* Trying to delegate the events to document DOM like below seems not work. It has work with other native events but not with slider. > $(document).on('slide slideStop','#slide_distance', function (e) { ... }); Try reinitialize the component Slider using the Slider() function has generated a new instance (duplicate) component on DIV. $(#sl1).Slider({...}) Thanks any suggestions — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#923?email_source=notifications&email_token=AAF2NWIYVLPT4WKYGO3A3GDPX356FA5CNFSM4HQWT2BKYY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4GWTEDDQ>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAF2NWIYDW6J6RUK4CFA3I3PX356FANCNFSM4HQWT2BA> .

[gilsondelrei]

Hi Kyle, yes, i have tested but it isn't working and follow duplicating the slider on div. The ideal behaviour will be recover the slider component that was recovered, but its freezed. $('#newSlider').on('click',function(e){ $('#sl1').slider('destroy'); <-------- $('#sl1').slider({ formater: function(value) { return 'Current value: '+value; } }) }); look it [image: image.png] Em qua, 29 de mai de 2019 às 19:17, Kyle J. Kemp <notifications@github.com> escreveu:

…

Have you tried to call destroy on the slider before re-initializing it? Kyle Kemp / Web Developer 920-215-1371/ ***@***.*** http://seiyria.com On Wed, May 29, 2019 at 5:14 PM Gilson DElrei ***@***.***> wrote: > Hi all. > I'm experiencing a problem with losing events when replacing content from > ajax. Well, it isn't an ajax problem, but i have some dynamic contents and > need replace the html slider tag when i update the container DIV with other > informations. > > It's my process: > 1 - First i get the original content of container including the > bootstrap-slider component generated tags. The content is like sample > below. Its my *container_recovered_content* > > <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> > > 2 - After i call a ajax process and replace all components on my DIV > container (not in example) with new content. > 3 - User click on back button and the original content (item 1) is > recovered and replaced in place. > > $("#container').html(*container_recovered_content*). > > at now the slider component is rendered, but component slider is freezed. In other words, it doesn't response for any mouse events. > > I have observed on Chrome that after replaced the content the mouse events > initially binded was unbinded on component. > > *Tests:* > I have generated a Fiddle (http://jsfiddle.net/gildlrei/yxj9m4p8/84/) and > some details to execute the fiddle. It's not ajax example, but enough to > evidence the problem. > > On my sample test there are three buttons that you can try in sequence as > below. > > 1 - First click on [*generate content*] button. It will got the original > slider html generated and display it on the bottom. Additionally it will > replace the container DIV with the text "nothing here" erasing the slider > component. > > 2 - Click on [*replace content*] button. It will return the original > content and re-rendering the slider component. At this point you can see > that slider is freezed. > > 3 - Click on [*start new instance of Slider*] button. It will call the > Slider() function on my selector slider *$('#sl1')* trying to > reinitialize it. At this point you can see two components, the last one is > working. > > *One last note about this* > Trying to delegate the events to document DOM like below seems not work. > It has work with other native events but not with slider. > > > $(document).on('slide slideStop','#slide_distance', function (e) { > ... > }); > > Try reinitialize the component Slider using the Slider() function has > generated a new instance (duplicate) component on DIV. > > $(#sl1).Slider({...}) > > Thanks any suggestions > > — > You are receiving this because you are subscribed to this thread. > Reply to this email directly, view it on GitHub > < #923?email_source=notifications&email_token=AAF2NWIYVLPT4WKYGO3A3GDPX356FA5CNFSM4HQWT2BKYY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4GWTEDDQ >, > or mute the thread > < https://github.com/notifications/unsubscribe-auth/AAF2NWIYDW6J6RUK4CFA3I3PX356FANCNFSM4HQWT2BA > > . > — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#923?email_source=notifications&email_token=AB2FRKRLBV4ELKHCPRXKYMLPX36H7A5CNFSM4HQWT2BKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODWQZMYA#issuecomment-497129056>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AB2FRKUK4QEF5UQ2OKJCMSTPX36H7ANCNFSM4HQWT2BA> .