2014-10-03 62 views
0

在我的Rails應用4,我有麻煩AJAX「成功」事件觸發對於那些使用jQuery添加到頁面動態鏈接。我正在創建像以下這樣的標記並將其動態添加到頁面中。阿賈克斯成功事件沒有觸發動態添加鏈接

<a data-confirm="Are you sure?" data-method="delete" data-remote="true" href="/mylink" rel="nofollow">delete</a> 

在下列情況觸發:

$(document).on("ajax:success"

但這並不觸發我想使用的版本,一個是:

$("a[data-remote]").on("ajax:success"

任何想法,爲什麼$(document)版本工作,而$("a[data-remote]")版本沒有?爲了澄清,當事物動態添加時,它並不具體。對於已經在頁面上的鏈接,他們觸發事件就好了。

注:Turbolinks被刪除。

+2

這是因爲,除非你指定它是這樣的。對()事件處理不處理動態添加的元素:「$(文件)。在(‘AJAX:成功’,‘一個[數據遠程]’,功能(){});」。它與「$(文件)」,因爲事件處理程序捕獲的事件,當它冒泡記錄,[更多與此事件冒泡和捕獲(http://www.smashingmagazine.com/2013/11/12/an -Introduction到DOM事件/)。您可以將事件處理程序添加到包含所有'a [數據確認]'的父元素,以便它不會過濾每個事件。 – Deviljho 2014-10-03 14:09:00

+0

@AdriánSalgado你想把你的評論放入一個答案,所以我可以接受並給你點數? – Dty 2014-10-04 02:22:23

回答

0

那是因爲。對()事件處理不處理動態添加的元素,除非您指定它是這樣的:

$(document).on('ajax:success', 'a[data-remote]', function(){});". 

它與「$(文件)」,因爲事件處理程序捕獲事件,當它起泡到它的父元素,在這種情況下是'文檔'。

您應該添加事件處理程序,它包含所有的父元素a [數據確認]'所以它並不過濾每一個事件,或者你可以指定一個像上面的代碼。

Here's more on event bubbling and capturing