Ramtin Gh
Ramtin Gh

Reputation: 1050

jQuery works once when load on demand

I'm struggling with this issue here: I'm using .load to load sections different sections of the website, to get jquery work on loaded content I tried loading js file together with content and it works great, but the problem is when user clicks on that section and it gets loaded again, jquery wont work anymore, here is the js file I'm trying to make work every time user goes to that section:

$(".slider").each(function() {
    var radios = $(this).find(":checkbox").show();
    $("<div></div>").slider({
      min: parseInt(radios.first().val(), 10),
      max: parseInt(radios.last().val(), 10),
      slide: function(event, ui) {
        radios.filter("[value=" + ui.value + "]").click();
      }

    }).appendTo(this);

});

I think adding some sort of live function would be the solution, any ideas? Thanks

Upvotes: 1

Views: 92

Answers (1)

jsweazy
jsweazy

Reputation: 1621

One thing you could do instead of loading jQuery file with your HTML. You can you use the complete callback function to add everything you need. This function is ran when your html is loaded to your selector.

$('#your-div').load(url, funciton(){
  $(".slider").each(function() {
    var radios = $(this).find(":checkbox").show();
    $("<div></div>").slider({
      min: parseInt(radios.first().val(), 10),
      max: parseInt(radios.last().val(), 10),
      slide: function(event, ui) {
        radios.filter("[value=" + ui.value + "]").click();
      }

    }).appendTo(this);
  });
});

Upvotes: 1

Related Questions