使用onclick动态创建元素

Question

我显然错过了一些东西，但是我一直无法找到我做错了什么，而且我盯着这个呆了太久了

function message(options) {
  ...
  options.onclose = options.onclose || null;
  ...
  this.gui = document.createElement('div');
  this.msg = document.createElement('div');
  ...
  if (options.onclose != null) {
    var close = document.createElement('i');
    close.innerHTML = 'close';
    close.className = 'material-icons close';
    close.onclick = options.onclose;
    console.log(close.onclick);
    this.msg.append(close);
  }

  this.msg.innerHTML += options.msg;
  this.gui.append(this.msg);
  ...
  return this.gui;
}

msgContainer.append(new message({
    class: 'update',
    sticky: true,
    icon: 'mic',
    msg: 'You are in a call',
    onclose: () => { console.log('click'); }
  }));

来自开发人员控制台document.querySelector('.close').onclick is null ，但是如果我添加了一个单击document.querySelector('.close').onclick = () => { console.log('click'); }; document.querySelector('.close').onclick = () => { console.log('click'); }; 有用？

Answer 1

为什么不起作用是因为单击是一种功能：

document.querySelector('.close').onclick

什么也没做，所以为什么要调用它。

document.querySelector('.close').onclick = () {
     alert("did something");
}

因此，真正的问题是单击时您想做什么？ 创建一个新的链接或div。 我将开始使用jQuery。

jQuery的答案：

$(document).ready(function(){
     $(".myclass").click(function(){
          $(".container_div").append("<a href='test.php'>test link</a>");
          // also .prepend, .html are good too
     });

});

Answer 2

这是工作示例。 我稍微修改了您的代码。 您可以通过将其传递给数组来添加更多事件。 我使用了addEventListener。

 var msgContainer = document.getElementById('msgContainer'); function message(options) { options.onclose = options.onclose || null; this.gui = document.createElement('div'); this.msg = document.createElement('div'); if (options.onclose != null) { var close = document.createElement('i'); close.innerHTML = 'closepp'; close.className = 'material-icons close'; close.dataset.action = 'close'; this.msg.append(close); } this.msg.innerHTML += options.msg; this.gui.append(this.msg); // Create listeners dynamically later on events = [ { selector: close.dataset.action, eventType: 'click', event: options.onclose } ]; renderElement(this.gui, events); } function renderElement(element, events) { msgContainer.append(element); for (i = 0; i < events.length; i++) { var currentEvent = events[i]; var selector = element.querySelector('[data-action="' + currentEvent['selector'] + '"]'); selector.addEventListener(currentEvent['eventType'], currentEvent['event'].bind(this), false); } } new message({ class: 'update', sticky: true, icon: 'mic', msg: 'You are in a call', onclose: () => { console.log('click'); } }); 

 <div id="msgContainer"> </div> 

Answer 3

我终于想通了！ 设置innerHTML会使chrome重建dom，并且在此过程中会丢失onclick事件，如果我使用textContent而不是innerHTML，则onclick可以正常工作。 在下面的示例中，如果您注释掉JS的最后一行，则onclick起作用，这在jsFiddle中是相同的

var blah = document.getElementById('blah');
var div = document.createElement('button');
div.style['background-color'] = 'black';
div.style.padding = '20px;';
div.style.innerHTML = 'a';
div.onclick = () => { alert('wtf');};

blah.appendChild(div);

// Uncomment this to make onclick stop working
blah.innerHTML += ' this is the culprit';

<div id="blah">
</div>