Javascript：动态创建按钮的 onclick/onsubmit

发布于 2024-11-29 18:56:11 字数 1051 浏览 2 评论 0原文

我以在互联网上找到的方式动态创建一个按钮：

 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

使用 setAttribute 的解决方案有效：

b.setAttribute("onClick", "alert('OnClick')");

但是，我想调用一个类方法（而不是警报），并且 b.我希望/认为 onclick 语法在这方面看起来更好。这个 onclick 区分大小写吗？因为如果我写，

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

我不会收到上面的错误，但它仍然不起作用，即我没有收到警报。我很感谢任何提示。

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

谢谢并致以最诚挚的问候，

克里斯蒂安

原文

I dynamically create a button in the way I found in the Internet:

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

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

Unfortunately, it's not working and throwing the following error:

  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

The solution with setAttribute work:

b.setAttribute("onClick", "alert('OnClick')");

However, I want to call a class method (instead of alert), and the b.onclick syntax looks better in that respect, I hope/think. is this onclick case senstive? Because if I write

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

I don't get the error above, but it's still not working, i.e. I don't get the alert. I'm thankful for any tips.

As a bonus question: How can I avoid that the current page is reload when the button is clicked? I just like call a method and not to cause a page reload.

Thanks and best regards,

Christian

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

谜兔 2024-12-06 18:56:11

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);
};

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);
};

回复收藏 0 原文

兮子 2024-12-06 18:56:11

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

 <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>

Here is a version with attributes for input:

 <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>

回复收藏 0 原文

~没有更多了~