[英]dynamically create element with onclick
I'm obviously missing something, but I haven't been able to find what I am doing wrong and I have been staring at this for entirely too long 我显然错过了一些东西,但是我一直无法找到我做错了什么,而且我盯着这个呆了太久了
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'); }
}));
from the developer console document.querySelector('.close').onclick is null
, but if I add an on click document.querySelector('.close').onclick = () => { console.log('click'); };
来自开发人员控制台
document.querySelector('.close').onclick is null
,但是如果我添加了一个单击document.querySelector('.close').onclick = () => { console.log('click'); };
document.querySelector('.close').onclick = () => { console.log('click'); };
it works? 有用?
Why it wont work is because on click is a function: 为什么不起作用是因为单击是一种功能:
document.querySelector('.close').onclick
doesn't do anything so why call it. 什么也没做,所以为什么要调用它。
document.querySelector('.close').onclick = () {
alert("did something");
}
so the real question is what do you want to do when clicked? 因此,真正的问题是单击时您想做什么? create a new link or div.. look below.
创建一个新的链接或div。 I would start using jQuery.
我将开始使用jQuery。
jQuery answer: jQuery的答案:
$(document).ready(function(){
$(".myclass").click(function(){
$(".container_div").append("<a href='test.php'>test link</a>");
// also .prepend, .html are good too
});
});
Here is working example. 这是工作示例。 I changed your code a little bit.
我稍微修改了您的代码。 You can add more events by passing it to an array.
您可以通过将其传递给数组来添加更多事件。 I used addEventListener.
我使用了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>
I finally figured it out! 我终于想通了! setting innerHTML makes chrome rebuild the dom and in the process it loses the onclick event, onclick works fine if I use textContent instead of innerHTML.
设置innerHTML会使chrome重建dom,并且在此过程中会丢失onclick事件,如果我使用textContent而不是innerHTML,则onclick可以正常工作。 In the below example if you comment out the last line of JS the onclick works, here's the same thing in jsFiddle
在下面的示例中,如果您注释掉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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.