Javascript 如何通过jquery在所有链接中添加函数？

我使用下面的函数来加载页面。我有大量链接，无法添加到所有链接

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

我想要一个函数，它将获取所有

标签

href

值，并将此函数添加到所有链接，如下所示：

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++;
}

var oP=document.getElementsByTagName（“a”），
ctr=0
;
而（中心线<操作长度）{
var oldHref=document.getElementsByTagName（“a”）[ctr].href；
document.getElementsByTagName（“a”）[ctr].href=“javascript:loadPage（“+oldHref+”）；”；
ctr++；
}

我想添加到所有链接，但不想添加到“INDEX.HTML”。

类似这样的内容：

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

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

由于您正在动态加载页面的各个部分，因此需要设置事件委派。具体执行方式取决于您使用的jQuery版本，但您将使用（jQuery 1.7+）或（jQuery 1.7之前）函数。

.on（）

示例如下所示：

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

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

---

在回答您关于转换新加载页面上的链接的问题时，您可以使用回调函数将@AnthonyGrist之类的函数应用于新内容，例如：

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（）

也是一个合理的解决方案。

对您提供的常规Javascript代码有两条评论：1。您已经将

document.getElementsByTagName（“a”）

存储在

oP

中，在

循环中再次调用它是额外的、不必要的处理。2.迭代其他元素集合通常是通过
for
循环来完成的，而不是
while
循环，因为您知道所需的迭代次数。它会加载页面，但不会转换新加载页面的链接。对于新加载的页面，我应该怎么做？在新加载的页面中也包括该脚本。@danny我完全忽略了这一点-因为您是动态加载内容的，所以事件委派是一种方法。我已经使用
.on（）
更新了我的答案，以包含代码-如果您使用的是jQuery 1.7之前的版本，则需要使用
.delegate（）
；语法上的差异相对较小，因此，如果需要，您应该能够通过阅读已链接文档的部分来进行转换。@AnthonyGrist$（'body'）。on未定义这意味着什么？@danny这很可能意味着您使用的是1.7之前的jQuery版本，它没有
.on（）
函数。改用
.delegate（）
；您需要编写的
.on（）
代码中有一个小的语法更改-请阅读这两个函数的文档，以了解它是什么。@Jorden您的代码给了我一个缺少}的错误。“你能再检查一下吗？”丹尼说。在第三条线上。通常情况下，堆栈溢出应答中的代码并不意味着要复制和粘贴，而是要在理解它之后自己理解和实现