Question

这是我用来创建按钮的代码：

var dfom = document.createElement('div');
dfom.setAttribute("id","options");
dfom.innerHTML = "<input type=\"button\" value=\"Say HI\" onclick=\get()\ />";
dfom.style.padding = '10px';
document.body.insertBefore(dfom, document.body.firstChild);

按钮创建正常;它显示正确。所以为了测试它，我做到了：

function get()
{
alert("HI");
}

然而，当我点击按钮时没有任何反应。有什么帮助吗？谢谢！

Answer 1

函数名称也应该用引号括起来，即onClick="get();"。对于instace here，只要你有时间，就可以阅读事件监听器。

Answer 2

如果您想编写正确的JavaScript代码，那么您应该按如下方式执行：

var dfom = document.createElement("div"),
    button = document.createElement("input");

button.type = "button";
button.value = "Say HI";
button.addEventListener("click", function() {
    alert("HI");
}, false);

dfom.id = "options";
dfom.style.padding = "10px";
dfom.appendChild(button);

document.body.insertBefore(dfom, document.body.firstChild);

DEMO： http://jsfiddle.net/TKdYh/

Answer 3

\应\" get()左右，但需要考虑更多因素：get函数实际上必须在onload之外定义或另一个回调，因为它需要在全球范围内可用。您需要一个类似于此的设置：

http://jsfiddle.net/CZ2y4/

...在get回调之外定义onLoad，使其可供onclick使用。

此外，使用标准事件绑定而不是onclick：

dfom.innerHTML = "<input type=\"button\" value=\"Say HI\">";
dfom.firstChild.addEventListener('click', get);

http://jsfiddle.net/CZ2y4/1/

Answer 4

以下适用于我：

window.onload = function() {
  var dfom = document.createElement('div');
  dfom.id = "options";
  dfom.innerHTML = '<input type="button" value="Say HI" onclick="get()">';
  dfom.style.padding = '10px';
  document.body.insertBefore(dfom, document.body.children[0]);
}

function get() {
  alert("HI");
}

有些注意事项：

对于标准DOM属性，通常最好只设置属性，不要使用setAttribute，因为它是不一致的实现。
使用单引号作为makrup的脚本和双引号更加清晰，这样您就不必使用尽可能多的反斜杠来引用引号
严格来说，HTML属性值只需要引用if they contain certain characters。引用它们更容易，而不是记住那组字符是什么。浏览器也非常宽容，因此您可以使用不应引用的字符，这些字符应该在某些浏览器中引用，而不是其他浏览器。

如何获取创建的元素（按钮）来运行函数？

4 个答案: