Question

For each checkbox on the web page, I replace it with a slider that I borrowed from jsfiddle.net/gnQUe/170/

This is done by going through the elements when the document is loaded.

Now the problem is that when more content is loaded via ajax, the new checkboxes are not transformed.

To solve the problem, I used AjaxComplete event to go through all the elements again and replace the checkboxes with sliders.
Now the problem happens that elements that were already replaced, get two sliders. To avoid that I check if the checkbox is hidden and next element is div of class “slider-frame”, then don’t process the re-process the element.

But I have a lot of other such controls as well, and I am presume I am not the only one that has this problem. Is there another easy way around it?

There exists jQuery live/on( http://api.jquery.com/on/ ) event but it requires an event as an argument? whereas I would like to change the look of my controls when they are rendered.

Another example of the same problem is to extend some controls that are loaded via ajax with jQuerys autocomplete plugin.

Is there a better way to accomplish this other than changing some attributes on the element.

To summarize, on document load I would like to process every element in DOM, but when more elements are loaded via ajax then I want to change only the new elements.

Answer 1

I would assume that when the element’s are transformed into a slider, a class is added to them. So just add a not clause.

$(".MySelector").not(".SomeClassThatSliderAddsToElement").slider({});

So in the case of your code do something like this

$('.slider-button').not(".sliderloaded").addClass("sliderloaded").toggle(function(){
    $(this).addClass('on').html('YES');
    $('#slider').val(true);
},function(){
    $(this).removeClass('on').html('NO');
    $('#slider').val(false);
});

Since you said you do not want to add anything else, how about you change the toggle function to click.

$(document).on("click", ".slider-button", function(){
   var elem = $(this);
   elem.toggleClass("on");
   var state = elem.hasClass("on");
   elem.text(state?"YES":"NO");
   elem.parent().next().val(state);    
});

Running fiddle: http://jsfiddle.net/d9uFs/