Using a function in replaced dom content

Question

Okay so heres the problem. I'm replacing html content with the jquery function replace.with. Some parts of the HTML contains an imageslider from the library http://responsiveslides.com/ except the Jquery that makes the slide functional doesnt fire after the content is replaced. On the initial page it works fine then after I replace the content it stops working. However i did get it working with adding a click event on the page with the replaced content.

$(document.on('click', '.title', function(){
$("#slider3").responsiveSlides({
  auto: true,
  speed: 500, 
  });
  });

so above code works fine, how ever I want it to fire when the content is replaced. Not when the user clicks on a button on the new page. I also tried this:

$(document).on('click','#title1', function(){
GoToFusion();
$("#slider3").responsiveSlides({
auto: true,
speed: 500,
});
});

And I also tried putting the folowing code in the HTML that is replacing the old HTML hoping it would just fire after the page loaded...

<script> $(function () {   
    $("#slider3").responsiveSlides({
    auto: true,
    pager: false,
    nav: true,
    speed: 500,
    namespace: "large-btns"
  });
  });
  </script>

Also I dont think theres anything wrong with the HTML or CSS, because the slider works fine with the click event. My deadline for school is closing in and i really could use some help... Thanks!!

p.s. sorry for my bad english its not my native language.

edit:

//function GoToFusion()
function GoToFusion() {
$("#Box1_Index").animate({ 'margin-left': '100%' }, 1500, function () {
    $("#Box1_Index").replaceWith(Box1_Fusion);
});
$("#Box2_Index").animate({ 'margin-left': '100%' }, 1500, function () {
    $("#Box2_Index").replaceWith(Box2_Fusion);
});
$("#Box3_Index, #Box3_Contact").animate({ 'margin-left': '100%' }, 1500,       function () {
    $("#Box3_Index, #Box3_Contact").replaceWith(Box3_Fusion);
});
$("#Box4_Index").animate({ 'margin-left': '100%' }, 1500, function () {
    $("#Box4_Index").replaceWith(Box4_Fusion);
});       
}

Answer 1

Usually, you can't get that without re-initializing the plugin - which is something you're doing (kind of) with your "on-click" workaround. I'd suggest triggering a click event after you replace the content.

So if you have

$(document.on('click', '.title', function(){
    $("#slider3").responsiveSlides({
      auto: true,
      speed: 500, 
    });
});
$("#Box1_Index").animate({ 'margin-left': '100%' }, 1500, function () {
    $("#Box1_Index").replaceWith(Box1_Fusion);
    $(document).trigger('click'); //trigger click on the document
});

To me this seems quite inefficient (costly) though. If the plugin supports reinit (or a form of autoupdate), i'd suggest just replacing the content inside the DOM the plugin uses.

Answer 2

$(document).on('click','#title1', function(){

$("#Box1_Index").animate({ 'margin-left': '100%' }, 1500, function () {
    $("#Box1_Index").replaceWith(Box1_Fusion);
});
$("#Box2_Index").animate({ 'margin-left': '100%' }, 1500, function () {
    $("#Box2_Index").replaceWith(Box2_Fusion);
});
$("#Box3_Index, #Box3_Contact").animate({ 'margin-left': '100%' }, 1500, function () {
    $("#Box3_Index, #Box3_Contact").replaceWith(Box3_Fusion);
});
$("#Box4_Index").animate({ 'margin-left': '100%' }, 1500, function () {
    $("#Box4_Index").replaceWith(Box4_Fusion);
    $("#slider3").responsiveSlides({
    auto: true,
    pager: false,
    nav: true,
    speed: 500,
    namespace: "large-btns"
  });
});

Did the trick, maybe not the most efficient way, but it works for me. Thanks for helping me out!