时间戳

首页 > 解决方案 > 如何从在 javascript 中创建的链接运行函数

javascript - 如何从在 javascript 中创建的链接运行函数

问题描述

我在一个 javascript 文件中有一个函数，它添加了一个指向我在 HTML 文件中创建的段落的链接。当用户单击链接时，我想调用在 javascript 文件中定义的函数。

我的 HTML：

<p id="para"></p>

我的 JavaScript：

var paraHTML = document.getElementById("para");

function addLink(id) {
    paraHTML.innerHTML += '<a id="' + id + '" onclick="clickedTest(); return false;">Click me!</a>'
}

function clickedTest() {
    console.log('here');
}

我也尝试过使用 href 例如

paraHTML.innerHTML += '<a id="' + id + '" href="javascricpt:clickedTest();">Click me!</a>'

但两种方式都给我一个错误说：ReferenceError: clickedTest is not defined

我尝试使用此问题中的以下代码，但链接数量在我的代码运行时不断变化，这使得它难以使用：

var elements = document.getElementsByTagName('a');
for(var i = 0, len = elements.length; i < len; i++) {
    elements[i].onclick = function () {
        console.log('here')
    }
}

该addLink()函数在我的javascript程序中的其他地方多次调用

标签： javascripthtml

解决方案

使用 innerHTML 创建内容通常很慢并且通常不鼓励使用，更有机的方法是务实地创建元素，然后向该元素添加事件侦听器。例如，

var elem = document.createElement('a');
elem.addEventListener('click', myClickHandler);
elem.innerText = 'My Tag';
paraHTML.appendChild(elem)

function myClickHandler(e) {
  console.log('a is clicked')
}

这不仅可以解决您的问题，还可以使您的代码更易于管理

推荐阅读