javascript - 使用点击事件锚定动态元素

Question

我正在尝试通过 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 对象设置的任何功能。

Answer 1

有什么问题？您将一个函数绑定(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对于他的评论:)