使用 JavaScript 设置 <a> 的点击

Set onclick of <a> using JavaScript

本文关键字：JavaScript 使用 设置      更新时间：2023-09-26

我想更改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 时，控制台上打印了"字符串"，所有"href"都更改为"#"，并且对于div 中的每个<a>，控制台都会打印元素：

 <a href="#">

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

我在这里错过了什么？

编辑：

我找错了地方。问题是我在将内部HTML附加到targetDiv之前运行了toJavascriptLinks(element)。这对于 href 属性来说没有问题，但对于 onclick 属性来说却是问题。解决方案只是先将其放入targetDiv，然后在targetDiv上运行toJavascriptLinks(element)：

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

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

首先：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);});

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

祝你好运！！

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

您在控制台中看不到 onclick.log因为您在 dom 中设置了 onclick 事件。如果您想在控制台.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);

然后控制台.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>

有关此解释的现场示例，请参阅此小提琴。

我也认为你已经在使用某种形式的jQuery（在不知情的情况下），因为你使用了.children("div#myDiv")。据我所知，这不是普通的 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;

请参阅此更新的小提琴以查看其实际操作。

这就留下了一个问题：你到底为什么要在你的变量名称前面放置"忍者"$符号？

这就是调试器显示 HTML 元素的方式。它不显示所有属性 - 特别是因为您将 DOM 属性onclick设置为函数引用，该函数引用不能显示为接受字符串的 HTML 属性onclick（

AFAIK 无法使用 JavaScript 设置，请参阅 Luc 的评论）。

请尝试console.log(element.onclick);，它应该显示类似 function() {...} 的内容。

还是事件句柄不起作用？

顺便说一句，您不使用jQuery来设置href和处理程序的原因是什么？

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

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

我真的会为此使用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/

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

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

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

相关文章：