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'); };，它会有效吗？

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。

＆＃13;

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'); }
  });

＆＃13;

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

＆＃13;

Answer 3

我终于明白了！设置innerHTML使chrome重建dom，并且在此过程中它会丢失onclick事件，如果我使用textContent而不是innerHTML，onclick工作正常。在下面的例子中，如果你注释掉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>

使用onclick动态创建元素

3 个答案: