我正在尝试通过 Javascript 动态添加 anchor 元素。我遇到的问题是 onclick 事件没有触发。我认为问题在于我如何生成 HTML。我正在创建一个数组,然后将 HTML 代码推送到该数组。创建输出后,我将加入该数组,然后将其添加到我拥有的 div 标签中。
var itemLink = new Object();
itemLink.LinkName = "Edit User";
itemLink.LinkListClass = "";
itemLink.LinkListRole = "";
itemLink.LinkFunction = function() {
//do something specific with rowItem variable
alert(rowItem);
}
var aTag = document.createElement("a");
aTag.setAttribute('class', 'btn btn-primary');
aTag.innerHTML = itemLink.LinkName;
aTag.setAttribute('href', '#');
var rowItem = 'abc1111'; //would be setting the rowId or some sort of identifier
aTag.onclick = itemLink.LinkFunction;
var output = [];
output.push('<table>');
output.push('<thead>');
output.push('<tr><th>col1</th><th>col2</th></tr>');
output.push('</thead>');
output.push('<tbody>');
output.push('<tr><td>col1 data</td><td>col2 data</td></tr>');
output.push('</tbody></table>')
var d1 = document.createElement('div');
d1.appendChild(aTag);
output.push(d1.innerHTML);
var mainView = document.getElementById('mainViewer');
mainView.innerHTML = output.join('');
<div id="mainViewer"></div>
当我在不使用数组和连接输出的情况下生成输出时,将创建 anchor 元素并且 onclick 事件工作得很好。
有什么想法吗?
我将有多个 anchor 链接,并且我不想对函数名称进行硬编码。我希望 onclick 事件触发 itemLink 对象设置的任何函数。
最佳答案
有什么问题吗?您将一个函数绑定(bind)到临时 DOM 元素,然后附加其 html,而不是其事件(这就是 innerHTML
的工作原理)。因此,当链接附加到 DOM 时,它是一个不同 DOM 链接,因此尽管该链接看起来相同,但其实并不相同。
那么,解决办法是什么?推送 DOM 元素而不是字符串,如下所示:
//var itemLink = new Object();
//itemLink.LinkName = "Edit User";
//itemLink.LinkListClass = "";
//itemLink.LinkListRole = "";
//itemLink.LinkFunction = function() {
//do something specific with rowItem variable
//alert(rowItem);
//}
var itemLink = {
LinkName: "Edit User",
LinkListClass: "",
LinkListRole: "",
LinkFunction: function() {
//do something specific with rowItem variable
alert(rowItem);
}
};
var aTag = document.createElement("a");
aTag.setAttribute('class', 'btn btn-primary');
aTag.innerHTML = itemLink.LinkName;
aTag.setAttribute('href', '#');
var rowItem = 'abc1111'; //would be setting the rowId or some sort of identifier
aTag.onclick = itemLink.LinkFunction;
var output = [];
output.push('<table>');
output.push('<thead>');
output.push('<tr><th>col1</th><th>col2</th></tr>');
output.push('</thead>');
output.push('<tbody>');
output.push('<tr><td>col1 data</td><td>col2 data</td></tr>');
output.push('</tbody></table>')
var mainView = document.getElementById('mainViewer');
mainView.innerHTML = output.join('');
var d1 = document.createElement('div');
d1.appendChild(aTag);
mainView.appendChild(d1)
<div id="mainViewer"></div>
感谢@David Thomas对于他的评论:)
关于javascript - 使用单击事件锚定动态元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47287199/