单击<；a>；使用javascript

我想更改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);
}

调用此函数：

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”都会更改为“#”，并且对于div中的每个元素，控制台都会打印元素：

 <a href="#">

---

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

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

是否确定元素正确？这对我有用

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

测试
document.getElementById（“mylink”）.onclick=function（）{
警惕（“工作”）；
};

首先：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，可以使用以下命令添加函数字符串：

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>

那么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>

看看它在起作用

这就留下了一个问题：究竟为什么要在变量名前面放置“ninja”$符号？
这正是调试器显示HTML元素的方式。它不会显示所有属性，特别是因为您正在将DOM属性设置为函数引用，而函数引用不能显示为HTML属性，该属性使用字符串（JavaScript无法设置该属性，请参见Luc的注释）

尝试
console.log（element.onclick）function（）{…}
的内容

或者事件句柄不工作

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

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


还有一件事：在大多数控制台中，您可以单击
，它将显示DOM属性，其中应该包括事件处理程序。
我真的会使用jQuery，这非常简单

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

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

请参阅下面的JSFIDLE以了解它的作用：
不需要是，匿名函数也可以完成这项工作。此外，分配字符串仅适用于element.setAttribute（）。感谢您的回复。元素似乎是正确的：谢谢你的回答，但我一直很清楚。$div之前有一行：var$div=$（htmlResponse）.children（“div#idOfDiv”）；htmlResponse是包含要解析的html的变量。我会更新question@GitaarLAB你听说过吊装吗？：）@赞戈：是的，这就是为什么在调用函数之前定义它们是一种好的做法。它使jslint生效。或者我错过了什么？嗯，谢谢你的演示。在那里工作得很好：）。我开始讲。@GitaarLAB在这种情况下，您不需要“在调用函数之前定义它们！”。如果您还没有听说过JavaScript，请阅读它……”（而且AFAIK不能用JavaScript设置它）“element.setAttribute（“onclick”，“alert（'WFM'）；”）；谢谢你的回答。不做JQuery的原因是我不是专家，只是不知道。谢谢你教我。遗憾的是，你的两个建议都没有给我带来解决办法。
​$(function() {
    $("div > a ").attr("href", "#").click(function(e) {
        e.preventDefault();
        doSomething();
    });
});

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