原型JavaScript Event.observe - 如何觀察可能存在或可能不存在的元素

我正在使用Prototype JavaScript，我有一個按鈕，我想用Event.observe方法觀察點擊操作。原型JavaScript Event.observe - 如何觀察可能存在或可能不存在的元素

問題是我想根據PHP代碼中的if語句調用兩個函數之一。我對JavaScript和Event.observe方法的理解是非常有限的，但是當試圖觀察不存在的元素時，代碼似乎不起作用。我能得到這個在一個非常哈克的方式工作，具體如下：

<?php if ($_type == "forward_second"):?> 
    <input type="button" id="week_backward_second" value="&lt;&lt;" disabled/> 
    <input type="hidden" id="week_backward" value="&lt;&lt;" /> 
<?php else: ?> 
    <input type="button" id="week_backward" value="&lt;&lt;" disabled/> 
    <input type="hidden" id="week_backward_second" value="&lt;&lt;" /> 
<?php endif; ?>

而且在JavaScript：

initialize: function {  
    Event.observe('week_backward', 'click', this.backward.bind(this)); 
    Event.observe('week_backward_second', 'click', this.backwardSecond.bind(this)); 
},

由於具有隱藏字段的「不必要」 Event.observe有一個元素觀察和代碼工作。

任何人都可以提出一個更好的方法來做到這一點？

感謝

來源

2012-07-14 user1152142

我希望我理解你的問題:)

var element = $('week_backward'), 
    method = this.backward; 

// Get a second element if first doesn't exist. 
if (!element) { 
    element = $('week_backward_second'); 
    method = this.backwardSecond; 
} 

element.observe('click', method.bind(this));

我用更短的原型API - 除非你沒有與其他庫我推薦它的衝突。

PS。我忘了提及，現在你只需要打印一個按鈕，沒有隱藏的按鈕。

來源

2012-07-14 19:50:06 Reinmar

沒有隱藏的字段。在觀察之前檢查元素的存在（如Reinmar寫的）：

initialize: function {  
    if ($('week_backward')) $('week_backward').observe('click', this.backward.bind(this)); 
    if ($('week_backward_second')) $('week_backward_second').observe('click', this.backwardSecond.bind(this)); 
},

沒有隱藏的字段。使用event delegation：

initialize: function { 
    document.on('click', '#week_backward', this.backward.bind(this)); 
    document.on('click', '#week_backward_second', this.backwardSecond.bind(this)); 
},

觀察員連接到document和接收click活動從你的元素冒泡，如果它的存在。

來源

2012-10-04 08:31:32 Victor

處理此問題的另一種方法是使用$$和invoke。這樣你就可以迭代一個或一個沒有元素的數組，並在需要時使用該方法。

$$('#week_backward').invoke('observe', 'click', this.backward); 
$$('#week_backward_second').invoke('observe', 'click', this.backwardSecond);

來源

2014-01-20 21:51:51 Walter

原型JavaScript Event.observe - 如何觀察可能存在或可能不存在的元素

回答

相關問題