2008-10-07 93 views
4

發現在由一個Ajax XHR Ruby中創建的表元素類時,與所述初始化任何DIV使用jQuery選擇不on Rails的

$('.foo').click(function(){ 
    alert("I haz class alertz!"); 
    return false; 
    }); 
中的application.js

,和

<a href = "" class = "foo" id = "foobar_1" >Teh Foobar </a> 

頁面,當點擊「Teh Foobar」時,它會發出警報並且不會跟隨鏈接。然而,當點擊時使用的application.js相同的代碼,並

<a href = "" class = "foo" id = "foobar_1" >Teh Foobar </a> 

時被返回到一個div由

form_remote_tag 

,「德Foobar的」不能警覺,並作爲一個鏈接。

發生了什麼,以及我怎麼圍繞它得到什麼?

回答

3

新元素添加到文檔中後您綁定您的活動不會自動獲得這些事件處理程序。解決這個問題的一個方法是 - 正如John Millikin所說 - 在創建新元素後重新綁定事件。

其他標準方式是事件委託。因爲事件通過它們的所有父元素在堆棧中上下移動,所以可以將事件綁定到將成爲所有目標元素的祖先的元素。當您單擊Foo類的東西

$(document).ready(function() { 
    $('body').click(function(event) { 
    if ($(event.target).is('.foo')) { // <- this is the magic 
     alert('Something of class foo was clicked.'); 
     return false; 
    } 
    }); 
}); 

現在,這個活動將在兩者之間捕獲的事件被解僱,除非有:

例如,這jQuery代碼將工作(你的語法可以用於其他JavaScript庫會發生變化)並取消冒泡。實際上,當幾乎任何事情被點擊時,事件都會被調用 - 「if」語句只是篩選出哪些事件值得警報。

3

標記從一個AJAX調用返回,當你設置的頁面不存在,所以它並沒有任何相關的onclick處理。您需要掛鉤到Rails AJAX支持,以便當它加載您的AJAX驅動的div時,它還會再次執行您的事件設置代碼。

3

你也可以使用Live Query jQuery插件,它能夠在DOM更新後自動綁定事件匹配的元素。在你的情況將是:

$('.foo').livequery('click', function() { 
    alert("I haz class alertz!"); 
    return false; 
}); 
+0

呀。後來我在搜索其他東西的時候遇到了這個解決方案。我最終可能會重構它。 – 2008-10-15 16:29:30