Javascript:onclick/onsubmit用于动态创建按钮

我以在Internet中找到的方式动态创建一个按钮：

 Page = function(...) {
   ...
 };

 Page.prototype = {
   ...
   addButton : function() {
     var b = content.document.createElement('button');
     b.onclick = function() { alert('OnClick'); }
   },
   ...
 };

不幸的是，它不工作并引发以下错误：

  Error: [Exception... "Component is not available"  nsresult: "0x80040111
  (NS_ERROR_NOT_AVAILABLE)"  location: "JS frame :: chrome://knowledgizer/content
  /knowledgizer.js :: <TOP_LEVEL> :: line 137"  data: no]
  Source File: chrome://browser/content/tabbrowser.xml Line: 434

但是，我想调用一个类方法（而不是alert），我希望/认为b.onclick语法在这方面看起来更好。这个onclick案例敏感吗？因为如果我写

b.onClick = function() {alert("OnClick");} // notice the spelling onclick vs onClick

我没有收到上面的错误，但它仍然不工作，即我没有收到警报。我很感谢你给我的提示

作为一个额外的问题：如何避免在单击按钮时重新加载当前页面？我只是喜欢调用一个方法，而不是导致页面重新加载

谢谢并致以最良好的祝愿

---

Christian

这是一个带有输入属性的版本：

var foo = function(){
  var button = document.createElement('button');
  button.innerHTML = 'click me';
  button.onclick = function(){
    alert('here be dragons');return false;
  };
  // where do we want to have the button to appear?
  // you can append it to another element just by doing something like
  // document.getElementById('foobutton').appendChild(button);
  document.body.appendChild(button);
};

 <button onclick="myFun()">Add More</button>
    <script>
        function myFun() {
            var x = document.createElement("INPUT");
            x.setAttribute("type", "file");
            x.setAttribute("id", "file");
            document.body.appendChild(x);
            x.onchange = function () {
                hello();
            };
            btn.appendChild(t);
            document.body.appendChild(btn);
        }
        function hello() {
            window.alert("hello!");
        }
    </script>

添加更多
函数myFun（）{
var x=document.createElement（“输入”）；
x、 setAttribute（“类型”、“文件”）；
x、 setAttribute（“id”、“文件”）；
文件.正文.附件（x）；
x、 onchange=函数（）{
你好；
};
附肢儿童（t）；
文件.正文.附件（btn）；
}
函数hello（）{
window.alert（“你好！”）；
}

谢谢，您的示例在这里也适用。我注意到我经常使用content.document.createElement（）而不是document.createElement（）。到目前为止，我还没有遇到任何问题，但显然有很大的不同。当我删除代码中的“内容”时，它就起作用了。一个有效的解决方案——在按钮中添加一个事件侦听器——解决了我的问题：你是一个明星。除了这个，在IE9中我的问题没有任何解决方法。我试图用jQuery动态添加按钮，它在所有浏览器中都能工作，但在IE9中却不能。嘿！我也在做类似的事情。我使用for循环创建了大约10个按钮。在警报中，我需要显示按钮上的数字。怎么做？@abc我猜你使用的是带计数器的for循环，就像for（var I=0；I）一样

 <button onclick="myFun()">Add More</button>
    <script>
        function myFun() {
            var x = document.createElement("INPUT");
            x.setAttribute("type", "file");
            x.setAttribute("id", "file");
            document.body.appendChild(x);
            x.onchange = function () {
                hello();
            };
            btn.appendChild(t);
            document.body.appendChild(btn);
        }
        function hello() {
            window.alert("hello!");
        }
    </script>