lightSlider destroy and rebuilt just run one time

Question

I have two and more buttons with same class to destroy and rebuild the lightSlider script.

The CMS where I built it, is loading the images and ajax. As the javascript is loaded by ready it does not allow me to trigger the button for a second time.

What would be the way to destroy and rebuild it after ajax is loaded (ajaxComplete)?

  $(document).ready(function() {
    var slider = $('#publicMethods').lightSlider({
        slideMargin:4,
        slideWidth:200,
        loop:false
    });
    $('.load').click(function(){
        slider.destroy();    
    });
    $('.load').click(function(){
        if (!slider.lightSlider) {
            slider = $('#publicMethods').lightSlider({
                slideMargin:4,
                slideWidth:200,
                loop:false
            });  
        }
    });
  });

score 1 · Accepted Answer · answered Nov 09 '17 at 13:17

1

$('.load').click(function(){
    slider.destroy();    
});

Your attaching event handler to a DOM element directly , you need to attach to document instead, like :

$(document).on('click','.load',function(){
  //code here
})

answered Nov 09 '17 at 13:17

Joaquin Javi

880
7
12

Yes but I cant call the variable slider inside the document. – karadayi Nov 09 '17 at 15:12
Thank you. Please write a full an answer to vote you up. – karadayi Nov 09 '17 at 23:19
1

Hi @karadayi , hope i helped! , context it's a hot topic in stackoverflow https://stackoverflow.com/questions/4886632/what-does-var-that-this-mean-in-javascript , cheers! – Joaquin Javi Nov 10 '17 at 09:53

lightSlider destroy and rebuilt just run one time

1 Answers1