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.