새 DOM을 소개 할 때 jQuery 효과를 상속하는 방법

Question

슬라이드 쇼 내에서 정렬되지 않은 목록을 대체하는 슬라이드 쇼가 있지만 이미지는 변경되지만 모든 효과는 상속되지 않습니다. 다음은 새 DOM을 소개하는 스크립트입니다.

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

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

어떻게이 새로운 이미지 목록을 상속 받습니까? 이 두 기능과 슬라이드 쇼는 동일한 파일에서 작동합니다. 나는 슬라이드 쇼 스크립트를로드하는

jQuery(document).ready(function() { 

있습니다.

Answer 1

각 요소에 이벤트를 첨부하는 대신 이벤트 위임을 사용하는 방법을 배워야합니다. 그렇게하면 일부 컨테이너 (또는 심지어 document)에 단일 이벤트 리스너를 첨부하고 이벤트를 잡을 수 있습니다. 은 거품을냅니다..

또한 코드를 훨씬 명확하고 이해하기 쉽게 보일 것입니다.

• 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. , 코드 하단에 HTML 코드 (</body> 이전)를 넣으면 트리거 될 때 이미 "onDomReady"이벤트가 발생합니다.

Answer 2

사용중인 슬라이드 쇼 플러그인을 알려주십시오. 그럼에도 불구하고 이전 슬라이드 쇼 인스턴스를 삭제하고 다시 시작하면됩니다. 같은 :

//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(); 
}); 

Answer 3

는()는 live() 또는 delegate();

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

//do something on click 
});