javascript - 使用 JavaScript 设置 的 onclick

Question

我想更改 div 中的所有链接，使它们不再引用页面，而是在单击时运行 JavaScript 函数。为此，我编写了这个函数:

function buildPageInDiv(htmlString){
    console.log(typeof htmlString);
    $div = $(htmlString).children("div#myDiv");
    $div.children("a").each(function(i, element){toJavascriptLinks(element)});
    document.getElementById("targetDiv").innerHTML = $div[0].innerHTML;
}

调用这个函数:

function toJavascriptLinks(element){
    element.href="#";
    element.onclick     = function(){console.log('Yeah!')};
    console.log(element);
}

现在，当我运行 buildPageInDiv , 'string' 打印在控制台上，所有“href”都更改为“#”并且对于每个 <a>在 div 中，控制台打印元素:

 <a href="#">

没有 onclick 的迹象在这里，点击链接不会在控制台上显示任何内容。

我在这里错过了什么？

编辑:

我找错地方了。问题是我正在运行 toJavascriptLinks(element)在将 innerHTML 附加到 targetDiv 之前.这对 href 属性没有问题，但对 onclick 来说是个问题。属性。解决方案就是将它放在 targetDiv 中首先然后运行 ​​toJavascriptLinks(element)在 targetDiv :

function buildPageInDiv(htmlString){
    console.log(typeof htmlString);
    var content = $(htmlString).children("div#myDiv")[0].innerHTML;
    document.getElementById("targetDiv").innerHTML = content;
    $("div#targetDiv").children("a").each(function(i, element) toJavascriptLinks(element)});
}

虽然问题不在我最初发布的代码中，但下面的综合答案让我找到了解决方案。

Answer 1

首先:jQuery中所有类型的选择器，以美元符号和括号开头:$()
其次:你需要用 ;
结束你的陈述最后:在调用函数之前定义函数是一种很好的做法，而不是依赖 javascript 为您将它们提升到顶部。这也会使 jslint 验证，反之则不会!

所以没有错误的代码应该是这样的:

function toJavascriptLinks(element){
    element.href="#";
    element.onclick     = function(){alert('Yeah!');};
    console.log(element);
}

$('div').children("a").each(function(i, element){toJavascriptLinks(element);});

参见 this fiddle用于工作演示。

祝你好运!

---

关于您更新后的问题:
这是对你的问题的更新。

您在 console.log 中看不到您的 onclick，因为您在 dom 中设置了 onclick 事件。如果你想在 console.log 中看到 onclick，你可以添加函数 STRING 使用:
element.setAttribute('onclick', '你的函数字符串');

假设在您的 html 中您有:

<a id="link_a" href="http://www.google.com">link 1</a>
<a id="link_b" href="http://www.duckduckgo.com">link 2</a>

你有这个 javascript:

var lnkA=document.getElementById("link_a");
var lnkB=document.getElementById("link_b");

lnkA.onclick=function(){alert(this.innerHTML);};
lnkB.setAttribute('onclick','alert(this.innerHTML);');

console.log(lnkA.outerHTML);
console.log(lnkB.outerHTML);

然后 console.log 将包含:

<a id="link_a" href="http://www.google.com">link 1</a>
<a onclick="alert(this.innerHTML);" id="link_b" href="http://www.duckduckgo.com">link 2</a>

参见 this fiddle有关此解释的实例。

我还认为由于使用了 .children("div#myDiv")，您已经在使用某种形式的 jQuery(在您不知不觉中)。据我所知，这不是普通的 javascript。而且我认为普通的 javascript 和 jQuery 都不会从普通的 html 字符串中选择那些 ID 为“myDiv”的 div，因此您更新中的代码不会完成这项工作。

最后，调整我对您更新后的问题的回答以及对 onclick 事件在解析的 html 源代码中可见的期望:

var htmlString='<div id="myDiv"><a href="http://www.google.com">link 1</a><a href="http://www.duckduckgo.com">link 2</a></div><div id="otherDiv"><a href="http://www.asdf.com">link 3</a><a href="http://www.yahoo.com">link 4</a></div>';

function toJavascriptLinks(element){
    element.href="#";
    element.setAttribute('onclick','console.log("Yeah!");');
    console.log(element.outerHTML);
}

//no innerHTML on documentFragment allowed, yet on it's children it's allowed
var frag = document.createDocumentFragment().appendChild( document.createElement('div') );
frag.innerHTML=htmlString;

var $div = $(frag).children('div#myDiv');

$($div).children("a").each(function(i, element){toJavascriptLinks(element);});


var outp=document.getElementById("output");
outp.innerHTML=frag.innerHTML;

参见 this updated fiddle看看它的实际效果。

这留下了一个问题:到底为什么要在变量名前放置“忍者”$ 符号？