使用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>