jquery - Using a function in replaced dom content -

okay heres problem. i'm replacing html content jquery function replace.with. parts of html contains imageslider library http://responsiveslides.com/ except jquery makes slide functional doesnt fire after content replaced. on initial page works fine after replace content stops working. did working adding click event on page replaced content.

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

so above code works fine, how ever want fire when content replaced. not when user clicks on button on new page. tried this:

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

and tried putting folowing code in html replacing old html hoping fire after page loaded...

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

also dont think theres wrong html or css, because slider works fine click event. deadline school closing in , use help... thanks!!

p.s. sorry bad english not 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); });        } 

usually, can't without re-initializing plugin - you're doing (kind of) "on-click" workaround. i'd suggest triggering click event after replace content.

so if 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 document }); 

to me seems quite inefficient (costly) though. if plugin supports reinit (or form of autoupdate), i'd suggest replacing content inside dom plugin uses.