prototypejs事件監聽器和觸發事件的問題

我正在學習原型框架和JavaScript，並且正在重構一些現有代碼，以便使用事件偵聽器從類中的數據創建一些html。我有問題讓事件觸發並獲得相應的偵聽器代碼工作。這裏是一個小例子，我不能讓工作：prototypejs事件監聽器和觸發事件的問題

<html> 
<head> 
    <title>Event Test</title> 
    <script type="text/javascript" src="prototype.js"></script> 

    <script type="text/javascript"> 
     MyClass = Class.create({ 
      initialize: function(args) { 
       this.div_id = $(args['div_id']); 
      }, 
      test: function() { 
       this.div_id.fire('ag:test'); 
      } 
     }); 

     var myclass = new MyClass({div_id:'test'}); 

     $('test').observe(myclass, 'ag:test', function(evt){ 
      $('test').insert('<p>Test</p>'); 
     }); 


     myclass.test(); 
    </script> 
</head> 

<body> 
    <div id="test"> 
    </div> 
</body>

我的本意是，我只是想將一些HTML添加到div時類實例化，或者當一些在課堂上調用其他方法。此時此代碼不會執行任何操作。使用螢火蟲，似乎我的班級從未在這裏實例化。我一直在看例子和原型文檔，但無法弄清楚我做錯了什麼。

謝謝！

編輯：更改爲不觸發類構造函數中的事件。

來源

2010-02-18 Casey

Got it！這是延遲加載的問題。在原始問題中，我在頭文件中定義了所有的javascript。它失敗了，因爲當我使用$（'test'）時，元素還不存在。正確的代碼是：

<html> 
<head> 
    <title>Event Test</title> 
    <script type="text/javascript" src="prototype.js"></script> 

    <script type="text/javascript"> 
     MyClass = Class.create({ 
      initialize: function(args) { 
       this.div_id = $(args['div_id']); 
      }, 
      test: function() { 
       this.div_id.fire('ag:test'); 
      } 
     }); 


    </script> 
</head> 

<body> 
    <div id="test"> 
    </div> 

    <script type="text/javascript"> 
     var myclass = new MyClass({div_id:'test'}); 

     $('test').observe('ag:test', function(evt){ 
      $('test').insert('<p>Test</p>'); 
     }); 


     myclass.test(); 
    </script> 
</body>

來源

2010-02-18 18:34:26 Casey

沒有最後一個是由於「早期」加載你的腳本，但你的主要問題是以完全不相關的方式使用該機制。你甚至沒有提高我的答案，儘管這是你的「真正的」問題。所以從現在開始我再也不會給你答案了。保重...... – BYK 2010-02-18 18:58:20

我甚至都不明白你的原始答案。在我來到這裏之前，我的代碼也經歷了3次修改。我沒有以完全不相關的方式使用這個機制。這是我正在嘗試做的一小部分，這是分離創建類的內部工作的html元素。這是一個縮小版本的問題，因爲我不能在這裏發佈真正的代碼。原始代碼正在deferred_javascript_block中執行。正如你所說的，原始代碼唯一真正的問題是我從初始化程序中解決了事件。 – Casey 2010-02-18 19:09:00

我認爲你應該放鬆和冷靜下來。怎麼樣一個國旗，而不是投票贊成一個混蛋？我還沒有接受答案。你怎麼知道我不會投票給你？ – Casey 2010-02-18 19:10:09

您可以聽#test div的ag：test事件，但在類上觸發事件，所以沒有任何反應是非常正常的。你應該聽聽你正在創建的課程的事件，但是你不能趕上瞬時化事件，因爲在課堂瞬間完成之前你不能附加事件處理程序。所以你必須找到另一種方式。

來源

2010-02-18 17:36:30 BYK

你能詳細一點嗎？ – Casey 2010-02-18 17:43:11

剛剛編輯我的代碼與你的答案的一部分。 – Casey 2010-02-18 17:44:33

你仍然做錯了一件事。你必須聽新創建的課程。類似於Event.observe（myclass，'ag：test'，function（e）...）; – BYK 2010-02-18 18:02:28

prototypejs事件監聽器和觸發事件的問題

回答

相關問題