Question

我试图通过Javascript动态添加一个锚元素。我遇到的问题是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>

当我在不使用数组并连接输出的情况下生成输出时，会创建锚元素并且onclick事件可以正常工作。

任何想法？
我将有多个锚链接，我不想硬编码功能名称。我希望onclick事件触发itemLink对象设置的任何函数。

Answer 1

问题是什么？你将一个函数绑定到一个临时DOM元素，然后追加它的html，而不是它的事件（innerHTML如何工作）。因此，当链接附加到DOM时，它是一个不同的 DOM链接，所以尽管链接看起来相同，但它不是。

那么，解决方案是什么？推送DOM元素而不是字符串，如下所示：

＆＃13;

//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)

＆＃13;

<div id="mainViewer"></div>

＆＃13;

感谢@David Thomas的评论：）

使用click事件锚定动态元素

1 个答案: