onclick 不触发功能(通过 innerHTML 创建的按钮)

Question

首先我尝试了：

   document.getElementById(trade_selection[i].slug).onclick = send_trade_request(auction_a, slug_for_trading, username);

，但它在发生任何点击事件之前触发了该功能，因此我发现我需要调用匿名功能才能使其正常工作，所以我尝试了：

var slug_for_trading = 'slug for trading';
var trade_selection = [{
  name: 'foo',
  slug: 'niceslug',
  selling__username: 'foo',
  price: 123
}, {
  name: 'foo1',
  slug: 'veryveryniceslug',
  selling__username: 'foo1',
  price: 123
}];
var el = document.getElementById('test');
el.innerHTML = "TRADE <br>";
for (var i = 0; i < trade_selection.length; i++) {
  var username = trade_selection[i].user_selling__username;
  var auction_a = "<a href='http://example.com/foo/" + trade_selection[i].slug + "'>" + trade_selection[i].name + "</a>";
  var trade_request_button = "<button id='" + trade_selection[i].slug + "'>Send Trade Request</button>";
  el.innerHTML = el.innerHTML + "- Auction name: " + auction_a + " | Price: " + trade_selection[i].price + trade_request_button + "<br>";
  console.log(document.getElementById(trade_selection[i].slug));
  document.getElementById(trade_selection[i].slug).onclick=function(){
  send_trade_request(auction_a, slug_for_trading, username);
  }
}
function send_trade_request(auction_a, auction_b, to) {
  alert(auction_a + " " + auction_b + " " + to);
}

<div id='test'>
</div>

且它有效，除了第一个按钮根本不调用该函数。我似乎无法弄清楚为什么是这样。寻找一些方向。

Answer 1

好的，所以问题是，您正在使用" innerhtml"将新元素分配给" root"div。通过说el.innerhtml = el.innerhtml "新元素html"。您正在"删除"以前添加的事件侦听器。

而是使用：

  var button = document.createElement('button');
  button.innerHTML = "send request: " + i;
  button.id = trade_selection[i].slug;
  el.appendChild(button);

这样，您可以保留先前的DOM树并附加新元素。测试并有效。

Answer 2

问题是您实际上是在立即调用send_trade_request(auction_a, slug_for_trading, username);。

您应该在函数中包装send_trade_request((，参考 而无需实际调用 it：

function myEvent(){ 
    send_trade_request(auction_a, slug_for_trading, username); 
};
document.getElementById(trade_selection[i].slug).onclick = myEvent;