How do I inherit jQuery effects when i introduce a new DOM

I have a slideshow that i replace an unordered list within the slide show, the images change but any eff开发者_如何学Goects are not inherited. this is the script that introduces a new DOM:

jQuery("#kwick1").click(function () {
jQuery('#photography').load('/design.html #photography');
});

jQuery("#kwick2").click(function () {
jQuery('#photography').load('/design.html #design');
     });

how do i get the jQuery slideshow to inherit this new list of images?? i both these functions and the slide show function in the same file. I have a

   jQuery(document).ready(function() {

that loads the slideshow script.

---

You have to let us know what slideshow plugin you are using. Regardless, you probably just need to destroy your old slideshow instance and restart it. Something like:

//start slideshow on
var slideshow = $('#slideshow').cycle();
slideshow.start();
$('#button').click( function() {
   //depending on plugin api maybe stop, add and start again
   slideshow.stop();
   slideshow.addImages();
   slideshow.start();
   //or perhaps just destroy old slideshow and restart
   slideshpw = $('#slideshow').cycle();
});

---

To attach events to newly added elements you should use live() or delegate();

jQuery('.yourselector').live('click', function(){

//do something on click
});

---

Instead of attaching events to each of elements, you should learn how to use event delegation. That way you can attach single event listener on some container ( or even document ) and catch the events as they bubble up.

Additionally it will make your code look much cleaner and easier to understand.

• http://lab.distilldesign.com/event-delegation/
• http://net.tutsplus.com/tutorials/javascript-ajax/quick-tip-javascript-event-delegation-in-4-minutes/
• http://www.sitepoint.com/javascript-event-delegation-is-easier-than-you-think/

P.S. , if you put your code at the bottom of the HTML ( before </body> ) then, when it triggers , it will already be an "onDomReady" event.