面板內容和腳本重新加載每次按鈕被點擊

這是一個非常簡單的Firefox插件，其中：面板內容和腳本重新加載每次按鈕被點擊

增加了一個Widget附加組件欄
attachs一個Panel到Widget
的Panel的內容包含一個input元素和2 button s

當我點擊Widget，Panel顯示，如預期。
但是當我點擊testButton時，console.log('loaded');被打印到控制檯。
即使我沒有更新面板，爲什麼Panel的內容和腳本會重新加載？

如果我在inputField中輸入一個值，然後單擊testButton，inputField的值被重置爲空，則可以使用另一個測試用例（具有相同的行爲）。

附加組件代碼，main.js：

require("./Panel").init();

模塊，Panel.js：

var Panel = require("sdk/panel"), 
    Data = require("./Data") 
    Widget = require("./Widget"); 

exports.init = function(){ 
    ui = Panel.Panel({ 
     width: 180, 
     height: 180, 
     contentURL: Data.get("html/Presentation.html"), 
     contentScriptFile: Data.get("js/Logic.js"), 
     onShow: function() { console.log("showing"); } 
    }); 

    Widget.init(ui); 
}

另一個模塊，Widget.js：

var widget = require("sdk/widget"), 
    Data = require("./Data"); 

exports.init = function(panel) { 

    widget.Widget({ 
     id: "test-widget", 
     label: "PanelTest", 
     contentURL: Data.get("images/ico.png"), 
     panel: panel 
    }); 
}

最後模塊，Data.js：

var data = require("sdk/self").data; 

exports.get = function(content) { 

    return data.url(content); 
}

的contentURL的面板，Presentation.html：

<html> 
    <head> 
     <meta charset="UTF-8" /> 
    </head> 
    <body> 
     <form> 
      <table> 
       <tr> 
        <input id="inputField" type="text" size="10"></input> 
       </tr> 
       <tr> 
        <td> 
         <button id="testButton">Test</button> 
        </td> 
       </tr> 
       <tr> 
        <td> 
         <button id="evaluate">evaluate</button> 
        </td> 
       </tr> 
      </table> 
     </form> 
    </body> 
</html>

contentScriptFile的面板，Logic.js：

window.onload=function(){ 
    console.log('loaded'); 

    var button = document.getElementById("evaluate"); 
    button.addEventListener("click", function() { 
     console.log("evaluate clicked"); 
    }); 
};

來源

2013-11-22 bobbyrne01

嘗試增加type='button'到你的按鈕，因爲這個屬性默認爲'submit'。

從MDN，在type屬性下：

提交：該按鈕的表單數據提交到服務器。如果未指定屬性，或者屬性動態更改爲空值或無效值，則這是默認值。

來源

2013-11-24 17:44:14 kahbou

完美，謝謝！ ..'按鈕：該按鈕沒有默認行爲。它可以使客戶端腳本與元素的事件相關聯，這些事件在事件發生時觸發 – bobbyrne01

面板內容和腳本重新加載每次按鈕被點擊

回答

相關問題