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

Question

我在 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

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

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

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

Answer 1

使用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')
}

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