Javascript: onclick / onsubmit для динамически создаваемой кнопки - PullRequest
Новая
       29

Javascript: onclick / onsubmit для динамически создаваемой кнопки

6 голосов
/ 15 августа 2011

Я динамически создаю кнопку, как нашел в Интернете: 

 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

Решение с помощью setAttributework: 

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

Однако я хочу вызвать метод класса (вместо alert), и синтаксис b.onclick выглядит лучше в этом отношении, я надеюсь / думаю.чувствителен ли этот случай с кликом?Потому что, если я напишу 

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

, я не получу ошибку выше, но она все еще не работает, т.е. я не получаю предупреждение.Я благодарен за любые советы.

В качестве дополнительного вопроса: Как я могу избежать перезагрузки текущей страницы при нажатии кнопки?Мне просто нравится вызывать метод, а не вызывать перезагрузку страницы.

Спасибо и наилучшими пожеланиями,

Кристиан

Ответы [ 2 ]

26 голосов
/ 15 августа 2011 
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 голосов
/ 22 декабря 2018

Вот версия с атрибутами для ввода: 

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