IE setAttribute onclick 问题

最新推荐文章于 2022-06-28 19:17:44 发布

原创最新推荐文章于 2022-06-28 19:17:44 发布 · 294 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#IE #jQuery #ViewUI

javascript 专栏收录该内容

12 篇文章

订阅专栏

本文探讨了在使用JavaScript动态创建HTML元素时，如何在IE浏览器中正确设置`onclick`属性以触发事件。通过使用匿名函数包裹目标函数来避免IE的兼容性问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Why does an onclick property set with setAttribute fail to work in IE?

Ran into this problem today, posting in case someone else has the same issue.

var execBtn = document.createElement('input');
execBtn.setAttribute("type", "button");
execBtn.setAttribute("id", "execBtn");
execBtn.setAttribute("value", "Execute");
execBtn.setAttribute("onclick", "runCommand();");

Turns out to get IE to run an onclick on a dynamically generated element, we can't use setAttribute. Instead, we need to set the onclick property on the object with an anonymous function wrapping the code we want to run.

execBtn.onclick = function() { runCommand() };

BAD IDEAS:

You can do

execBtn.setAttribute("onclick", function() { runCommand() });

but it will break in IE in non-standards mode according to @scunliffe.

You can't do this at all

execBtn.setAttribute("onclick", runCommand() );

because it executes immediately, and sets the result of runCommand() to be the onClick attribute value , nor can you do

execBtn.setAttribute("onclick", runCommand);

Or you could use jQuery and avoid all those issues:

var execBtn = $("<input>")
    .attr("type", "button")
    .attr("id", "execBtn")
    .attr("value", "Execute")
    .click(runCommand);

jQuery will take care of all the cross-browser issues as well.