javascript - 设置使用javascript的onclick

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

请参阅此小提琴以获取工作演示。

祝你好运！！

---

关于您更新的问题：
这是对您的问题的更新。

您在 console.log 中看不到 onclick，因为您在 dom 中设置了 onclick 事件。如果您想在 console.log 中查看 onclick，您可以使用以下方法添加函数 STRING：
element.setAttribute('onclick', 'your function string');

假设在您的 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 。

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

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

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;

请参阅此更新的小提琴以查看它的实际效果。

这就留下了一个问题：到底为什么要在变量名前面放置“忍者”$-signs？

Answer 2

这正是调试器显示 HTML 元素的方式。它没有显示所有属性 - 特别是因为您将 DOM属性 onclick设置为函数引用，它不能显示为采用字符串的 HTML属性( onclick无法使用 JavaScript 设置 AFAIK见卢克的评论）。

试试看console.log(element.onclick);，它应该显示类似function() {...}.

还是事件句柄不起作用？

顺便说一句，你有什么理由不使用 jQuery 来设置 href 和处理程序？

$div.children("a").attr('href', '#').click(function(){console.log('Yeah!')});

---

还有一件事：在大多数控制台中，您可以单击<a href="#">它，它将显示 DOM 属性，其中应包括事件处理程序。

Answer 3

我真的会为此使用jQuery，这很简单。

​$(function() {
    $("div > a ").attr("href", "#").click(function(e) {
        e.preventDefault();
        doSomething();
    });
});

var doSomething = function() {
    alert("Woah, it works!");
}

请参阅以下 jsfiddle 的实际操作：http: //jsfiddle.net/SsXtt/1/

Answer 4

你确定元素是正确的吗？这对我有用。

<a id="mylink">Test</a>
<script>
    document.getElementById("mylink").onclick = function() {
        alert("Works");
    };
</script>

Answer 5

函数需要在字符串中，尝试添加引号？