jquery를 통해 모든 링크에 함수를 추가하는 방법은 무엇입니까?

Question

다음 기능을 사용하여 페이지를로드하고 있습니다. 링크가 많아 모든 링크에 추가 할 수 없습니다. 나는 모든 링크에 추가 할 수 있지만에 "INDEX

var oP = document.getElementsByTagName("a"), 
    ctr = 0 
; 

while(ctr < oP.length) { 
    var oldHref = document.getElementsByTagName("a")[ctr].href; 

    document.getElementsByTagName("a")[ctr].href = "javascript:loadPage('" + oldHref + "');"; 
    ctr++; 
} 

:

function LoadPage(url) { 
    $("#canvas").load(url); 
} 

나는 모든 <a> 태그를 href 가치를 그냥 다음과 같이 모든 링크에이 기능을 추가하는 기능을합니다. HTML ". 이 같은

Answer 1

뭔가 : 동적 페이지의 섹션을로드하는 때문에

// select all links 
$('a') 
    // check that the pathname component of href doesn't end with "/index.html" 
    .filter(function() { 
    return !this.href.pathname.match(/\/index\.html$/); 
    // // or you may want to filter out "/index.html" AND "/", e.g.: 
    // return !this.href.pathname.match(/\/(index\.html)?$/i) 
    }) 
    // add a click event handler that calls LoadPage and prevents following the link 
    .click(function(e) { 
    e.preventDefault(); 
    LoadPage(this.href); 
    }); 

대신 이벤트 위임을 설정해야합니다. 이 작업을 수행하는 방법은 사용중인 jQuery의 버전에 따라 다르지만, .on() (jQuery 1.7+) 또는 .delegate() (jQuery 1.7 이전) 함수를 사용하게됩니다. .on() 예는 다음과 같이 보일 것입니다 : 회신에서

$('body').on('click', 'a', function(e) { 
    if(!this.href.pathname.match(/\/index\.html$/)) { 
     e.preventDefault(); 
     LoadPage(this.href); 
    } 
}); 

Answer 2

를 귀하의 질문에 당신이 @ AnthonyGrist 같은 함수를 적용하는 데 사용할 수있는 콜백 기능을 위해 새로로드 된 페이지, $.load() takes a second argument에 링크를 변환하는 방법에 대한 것은 새에의 콘텐츠 : 예 :

function loadPage(url) { 
    // add a callback to $.load() to be executed for the next content 
    $("#canvas").load(url, function() { convertLinks(this); }); 
} 

function convertLinks(context) { 
    // select all links in the given context 
    $('a', context) 
    // check that the pathname component of href doesn't end with "/index.html" 
    .filter(function() { 
     return !this.href.pathname.match(/\/index\.html$/); 
     // // or you may want to filter out "/index.html" AND "/", e.g.: 
     // return !this.href.pathname.match(/\/(index\.html)?$/i) 
    }) 
    // add a click event handler that calls LoadPage and prevents following the link 
    .click(function(e) { 
     e.preventDefault(); 
     loadPage(this.href); 
    }) 
    ; 
} 

// call convertLinks on the whole document on initial page load 
$(function() { convertLinks(document); }); 

.on()을 사용하는 것도 합리적인 해결책입니다.