Home/ Questions/Q 9172781
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T16:25:58+00:00

I’m having problems calling jQuery functions after replacing a div’s content by using .html()

  • 0

I’m having problems calling jQuery functions after replacing a div’s content by using .html() and the .on() method.
After I’ve visited a lot of pages I’m certain that the problem is caused by using the .on() method in a wrong way, but I can’t figure out what’s wrong. The problem is that the jQuery UI slider is not working after loading the html content. I think the solution could be quite simple, but I just can’t find the correct answer while there are hundreds of people with a similar problem.

I’m using one div element as body to show the content of other div elements.

<body>

<a href="#" content="#div1">load content</a>

<div id="body">static content with working UI slider 
 <div class="slider"></div> 
</div> 

 <div id="div1">loaded content where the UI slider is not working
  <div class="slider"></div>
 </div>

</body>

I use this jQuery code to dynamically load the html content (and slider)

$(".slider").slider(); 

$("body").on("click", "a", function(event) {

event.preventDefault();

var htmlContent = $($(this).attr("content")).html();

$("div#body").html(htmlContent);


});

Code can be found on: http://jsfiddle.net/zTRFj/1/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You’re serializing the HTML, so the old elements are all destroyed then reconstructed in their new location.

    Instead of calling .html() to get the HTML as a string, call .contents(). This’ll return the actual elements, and will keep any bound events and references:

    $(".slider").slider(); 

$("body").on("click", "a", function(event) {
    event.preventDefault();

    var htmlContent = $( $(this).attr("content") ).contents();

    $("div#body").html(htmlContent);
});
    • 0