jquery를 사용하여 페이지 업데이트

Question

PHP와 jquery를 사용하고 있습니다. 나는 또한 Drupal을 사용하고있다. 그러나 이것은 일반적인 문제이며 아마 Drupal과 관련이 없다고 생각한다. 링크를 클릭하면 JQuery와 느릅 나무의 조각이 일부 HTML 페이드 출시

<a href="/my-module/js/1" class="launch-js">Link</a> 

:

나는 페이지에 링크가 있습니다.

if (Drupal.jsEnabled) { 
    $(document).ready(function(){ 
    $('a.launch-js').click(function(){ 
    ... 

에 퇴색되고있는 HTML은

<a href="/my-module/js/1" class="launch-js">Link</a> 

을 포함하지만 예상대로이 링크를 클릭하면 더 이상 작동하지 않습니다. 브라우저는 현재 페이지를 업데이트하는 대신 page/my-module/js/1을로드합니다.

Answer 1

새 콘텐츠를로드하면 dom 요소가 덮어 쓰여지고 특정 요소에 이벤트가 첨부되므로 요소와 함께 사라집니다. 이 한 가지 표준 용액은 다음과 같이 페이지에 높은 요소에 이벤트를 첨부 할 jQuery.delegate()을 사용하는 것입니다

$('body').delegate('a.launch-js', 'click', function(ev) { 
    // same code as your function above 
}); 

이 때문에 DOM "거품"이벤트 작동합니다. 요소를 클릭하면 그 요소에 click 이벤트가 보내지 만 모든 요소는 상위 요소까지 전달됩니다 (사용자 정의 코드가 전파를 중단한다고 가정 할 때). 따라서 요소의 조상에 이벤트 핸들러를 연결하고 지정된 요소에서 클릭이 발생했는지 여부를 이벤트 처리기에서 결정할 수 있습니다. jQuery는 이에 대한 세부 사항을 숨기고이를 위해 간단한 위임 메서드를 제공한다.

$('body').on('click', 'a.launch-js', function(ev) { 
    // same code as your function above 
}); 

참고는 여기 선택기로 body 사용했지만, 당신은 모두의 조상 어떤 선택을 사용할 수 있습니다

그리고 jQuery를 1.7

,이 방법은 jQuery.on()로 대체되었습니다 가능하면 a.launch-js가 존재하며 항상 존재합니다. dom의 깊이가 깊을수록 (또는 다른 방법으로, 조상으로서 더 가까운 대상이 최종 대상 요소로 -이 경우 a.launch.js) 더 효율적입니다. 왜냐하면 dom traversal이 덜 필요하기 때문입니다 이벤트를 확인하기 위해 수행하십시오.

업데이트 : Drupal 6이 최대 1.3 버전의 jQuery 만 지원한다는 의견을 지적한 @Clive의 모자 팁. 위의 방법 (on 또는 delegate)은 버전 1.3에 존재하지 않습니다. 대신이이 작업을 수행하는 jQuery.live()라는 방법이었고, 그것은 다음과 같이 일 :

$('a.launch-js').live('click', function(ev) { 
    // same code as your function above 
}); 

이 방법을 사용하면 있다면 다른 방법은 (특정 자세한 내용은 API 문서를 참조하지 않는 것이 몇 가지 성능 단점이 있습니다 흥미 롭다.) 또한 deprecated이기 때문에 jQuery 버전 1.3을 사용하고 업그레이드 할 수없는 경우에만 사용해야한다.