将 onclick 事件添加到 JavaScript 中新添加的元素

我一直在尝试将 onclick 事件添加到我用 JavaScript 添加的新元素中。

问题是，当我检查 document.body. innerHTML 时，我实际上可以看到 onclick = alert (‘ bla’)被添加到新元素中。

But when I click that element I don't see the alert box is working. In fact anything related to JavaScript is not working..

下面是我用来添加新元素的方法:

function add_img() {
var elemm = document.createElement('rvml:image');
elemm.src = 'blah.png';
elemm.className = 'rvml';
elemm.onclick = "alert('blah')";
document.body.appendChild(elemm);
elemm.id = "gogo";
elemm.style.position='absolute';
elemm.style.width=55;
elemm.style.height=55;
elemm.style.top=200;
elemm.style.left=300;
elemm.style.rotation=200;
}

下面是我如何调用这个函数:

<button onclick=add_img()>add image</button>

现在图像在浏览器中完美地绘制出来了，但是当我点击图像的时候，我并没有得到提醒。

330527 次浏览
小开
最佳答案

.onclick should be set to a function instead of a string. Try

elemm.onclick = function() { alert('blah'); };

instead.

小开

Not sure but try :

elemm.addEventListener('click', function(){ alert('blah');}, false);
小开

you can't assign an event by string. Use that:

elemm.onclick = function(){ alert('blah'); };
小开

Short answer: you want to set the handler to a function:

elemm.onclick = function() { alert('blah'); };

Slightly longer answer: you'll have to write a few more lines of code to get that to work consistently across browsers.

The fact is that even the sligthly-longer-code that might solve that particular problem across a set of common browsers will still come with problems of its own. So if you don't care about cross-browser support, go with the totally short one. If you care about it and absolutely only want to get this one single thing working, go with a combination of addEventListener and attachEvent. If you want to be able to extensively create objects and add and remove event listeners throughout your code, and want that to work across browsers, you definitely want to delegate that responsibility to a library such as jQuery.

小开

I don't think you can do that this way. You should use :

void addEventListener(
in DOMString type,
in EventListener listener,
in boolean useCapture
);

Documentation right here.

小开

You have three different problems. First of all, values in HTML tags should be quoted! Not doing this can confuse the browser, and may cause some troubles (although it is likely not the case here). Second, you should actually assign a function to the onclick variable, as someone else meantioned. Not only is this the proper way to do it going forward, but it makes things much simpler if you are trying to use local variables in the onclick function. Finally, you can try either addEventListener or jQuery, jQuery has the advantage of a nicer interface.

Oh, and make sure your HTML validates! That could be an issue.

小开

You can also set attribute:

elem.setAttribute("onclick","alert('blah');");
小开

JQuery:

elemm.attr("onclick", "yourFunction(this)");

or:

elemm.attr("onclick", "alert('Hi!')");
小开

cant say why, but the es5/6 syntax doesnt work

elem.onclick = (ev) => {console.log(this);} not working

elem.onclick = function(ev) {console.log(this);} working


提交答案