현재 및 미래의 모든 링크 차단하기

Question

클릭했을 때 jquery로 링크를 가로채는 방법이 있는지 궁금합니다. 문제는 페이지가 처음로드 될 때 내 페이지의 일부 링크가로드되지 않는다는 것입니다. jquery에는 현재와 미래의 모든 링크를 가로 채는 방법이 있다는 것을 모호하게 회상합니다. 여기 내가 가진 코드가있다. 그것은 시작에 있었다가 모든 링크에서 작동하지만, 나중에이 기능에 의해

$('a').trackClick({ 
     areaClick: function(element) { return getAreaClicked(element); }, 
     href: function(element) { return getHrefFromElement(element); }, 
     text: function(element) { return getTextFromElement(element); }, 
     exceptions: function(element) { return isException(element); } 
    }); 

Answer 1

을 JQuery와 라이브 여기 참조 : http://api.jquery.com/live/

$('a').live('click', function(e){ 

var element = $(this); 
var data = {areaClick: function(element) { return getAreaClicked(element); }, 
      href: function(element) { return getHrefFromElement(element); }, 
      text: function(element) { return getTextFromElement(element); }, 
      exceptions: function(element) { return isException(element); } 
} 
    trackClick(data); 

    }); 

Answer 2

사용 jQuery의 live 이벤트 핸들러 차단되지 않아요 페이지에로드 된 링크 : 당신이 필요로하는

$('a').live('click', function() { 
    ... 
}); 

Answer 3

[편집 : 월의로 (나는이 대답에 가끔 upvote에 얻을, 그래서 더 많은 전류로 업데이트하고 싶었다 2015) 연습] :

내 원래의 답변에 따라 수신기를 위임하는 것이 좋습니다. jQuery의 현재 "우수 사례"구문은 .on()입니다. 순서 만 다르며 의미 상 직관적입니다 :

$('#parent').on('click', 'a', function(event) { 
    event.preventDefault(); 
    // do the rest of your stuff 
} 

나머지 원래 대답은 여전히 ​​적용됩니다.

---

기본 클릭 동작을 원하지 않으면 이벤트 버블 링을 중지해야합니다. 라이브보다 대리인을 선호하므로 내 제안 사항은 다음과 같습니다.

$('#parent').delegate('a', 'click', function(event) { 
    event.preventDefault(); 
    // do the rest of your stuff 
}); 

"#parent"는 예제 일뿐입니다. 앵커 태그의 영구 조상이 될 적절한 선택기를 사용합니다. "body"만큼 올라갈 수도 있지만, 종종 설명의 래퍼 ID도 잘 작동합니다.

[편집 : 나는 최근에 upvote를 보았는데, 이는이 답변이 누군가가 본 것을 의미합니다. 그것은 .live() 지금은 사용되지 않습니다 주목해야한다, 그리고 .delegate()하지만이 지원, 공식적으로 제안 구문은 위임자로 사용 .on()입니다 : 그 상당히 고가이지만

$('#parent').on('click', 'a', function(event) { 
    event.preventDefault(); 
    // do the rest of your stuff 
}); 

Answer 4

가장 간단한 방법은, jQuery의 live() 방법을 사용하는 것입니다. 가능하면 delegate()은 더 나은 옵션, 그리고 둘 사이의 차이를 설명 여기에 몇 게시물이 있습니다 :

Jquery live() vs delegate()
jQuery: live() vs delegate()

일반적으로 가장 좋은 방법은 단순히 결합하는 것입니다 당신이에 필요 무엇이든은 새로운 <a> 요소는 AJAX를 통해로드됩니다. 예를 들어 말한 바와 같이

$.ajax({ 
    url: 'http://example.com' 
    type: 'GET' 
    data: 'whatever' 
    success: function(data){ 
     //after inserting the response somewhere... 
     $('.insertedContent').find('a'.trackClick({ 
     areaClick: function(element) { return getAreaClicked(element); }, 
     href: function(element) { return getHrefFromElement(element); }, 
     text: function(element) { return getTextFromElement(element); }, 
     exceptions: function(element) { return isException(element); } 
     }); 
    } 
} 

Answer 5

는 답변 .live()을 추천하고 .delegate()은 out of date이다.

비슷한 문제가 있습니다. 다양한 요소에 대해 다양한 클릭 핸들러가 이미 사용되었지만, 추가 클릭 핸들러를 추가하여 모든 것을 잡아서 다른 것들보다 먼저 조치를 취하고 싶습니다.

다른 유용한 도구를 클릭하면 웹 응용 프로그램의 다양한 도구가 기본 상태로 재설정되기를 원합니다.

다음

내 솔루션은 ...

$(document).on("click", function(e){ 
    // This catches all clicks. 
    // It can be suppressed if the target uses e.stopPropagation() 
}); 

// To start the bubbling from an element "higher" than the document, 
// then use delegation, e.g.: 
// $(document).on("click", ".your_class", function(e){ etc }) 
// This can be really useful if you only have one sensitive area in the layout, 
// or you want different "master" click behaviours for different areas! 

$("#my_element").on("click", function(e){ 
    // prevent the default action, e.g. prevent "#" navigation on <a href="#"> 
    e.preventDefault(); 
    // prevent the click bubbling to the $(document) handler 
    e.stopPropagation(); 
    // now do my stuff 
    // ... 
}); 

$("#my_other_element").on("click", function(e){ 
    // prevent the default action, e.g. prevent "#" navigation on <a href="#"> 
    e.preventDefault(); 
    // this time I want the "catch all" to fire 
    // so I don't do stopPropagation() 
    // now do my stuff 
    // ... 
});