真的奇怪的原型JS錯誤 - 隱藏（）函數不隱藏預期的元素

好的。所以我剛開始使用Prototype JS demo。我的第一個是一個簡單的「你好世界」圖書館介紹一個演示。真的奇怪的原型JS錯誤 - 隱藏（）函數不隱藏預期的元素

頁面上有兩個div。一個是默認隱藏的。

兩個按鈕調用Prototype JS的show（）和hide（）方法。當你點擊「追加」按鈕時，隱藏的div是可見的，但是當你在同一個div上單擊「刪除」（調用hide（））時，它隱藏事件的來源，即刪除按鈕本身而不是預期的div（儘管爲$給予（）函數是正確的）

這裏ID是代碼：

<script type="text/javascript"> 

      document.observe("dom:loaded", function() { 


       alert("loaded"); 
       $('mydiv2').hide(); 

}); 

      function append() 
      { 
       $('mydiv2').show(); 
      } 

      function remove() 
      { 
       $('mydiv2').hide(); 
      } 


      </script> 

<body> 

     <div id='mydiv1'> 

      This is my first Prototype Application 

     </div> 

     <div id='mydiv2'> 

      This is appended text 

     </div> 



     <br/> <br/> <br/> 

     <button id="b1" onclick="append();"> Append Text </button> | 
     <button id="b2" onclick="remove();"> Remove Text </button> 

    </body>

在這裏，當你點擊「刪除文本」按鈕，它隱藏按鈕本身，而不是預期的「mydiv2」 DIV

這裏就是真正的奇怪現象：這個bug在現代瀏覽器中被觀察到（即在Chrome和IE 10上測試時）。但是，在IE7上測試時它可以正常工作。

這裏是Firebug控制檯：

this._cps2 is undefined 
[Break On This Error] 

Filtered chrome url chrome://browser/content/browser.js 

browser.js (line 1557)

任何人能解釋PLZ我這裏發生了什麼？

來源

2013-12-09 Navin Israni

好的，這是發生了什麼事。

還有另外一種方法remove()http://api.prototypejs.org/dom/Element/prototype/remove/這是一個關於實際按鈕元素的方法。因爲您使用的是直接onclick屬性而不是觀察者，所以元素的remove方法被激發而不是觀察者。在IE 7中的原因，「作品」是這些事件在IE瀏覽器的處理方式7.

這裏是如何解決它（和處理事件的規定方式）

先取下的onclick屬性按鈕

然後在你的domloaded功能添加

document.observe('dom:loaded',function(){ 
    $('b1').observe('click',append); 
    $('b2').observe('click',remove); 

});

和事件的行爲預期的是你的。

的jsfiddle與工作示例 http://jsfiddle.net/sPLmM/

來源

2013-12-09 15:38:27

作品！非常感謝！ :) –

任何鏈接來閱讀一些關於觀察員？ –

嘗試Event名稱空間http://api.prototypejs.org/dom/Event/以及觀察方法http://api.prototypejs.org/dom/Event/observe/ –

真的奇怪的原型JS錯誤 - 隱藏（）函數不隱藏預期的元素

回答

相關問題