2014-01-23 28 views
0

首先,我嘗試了this,and this類似問題的答案,但這似乎對我來說根本不起作用。如何將點擊事件綁定到尚未在DOM中的對象?

我想做一個點擊事件綁定到一個元素,這是通過ajax創建的東西,所以它不是在第一次在DOM中。

我注意到,在my_asset.js.coffee作品以下CoffeeScript的預期:

$ -> 
    $('#div').on "click", ".link", (e) -> 
    #do stuff 

根據JQuery的文件: 此功能綁定到所有「selected_div」點擊事件,即使它們被添加到DOM通過AJAX後do stuff部分工作正常

不過,我想:

$(this).after("<%= insert some long view here %>") 

所以,爲了做到這一點,我想我應該在$(this).after部分從asset.js.coffeemy_view.js.erb 移動在那裏我可以嵌入render partial

在那裏,在my_view.js.erb,我曾嘗試以下,(當量)的javascript:

$(function() { 
    $("#div").on("click", ".link", function() { 
    $(this).after("<%= render partial here %>"); 
    }); 
}); 

但它並不適用於第一次點擊的工作,(這樣做,但是,隨後點擊)

我認爲這是關係到一個事實,即當頁面首次加載時,不在DOM中。

這是怎麼發生的?這是原因嗎?我怎麼能看到我在資產中獲得的同樣行爲?

+0

是頁面加載時DOM中的#div ?嘗試使用:$(「body」)。on(「click」,「#div .link」,function(){ – theleebriggs

+0

是的,試過了,但它不起作用 –

回答

0

你會結合到容器元件(通常documentbody或),並delegate將事件與待創建的對象:

$(document).on("click", "#div .link", function() { 
    $(this).after("<%= insert some long view here %>"); 
}); 

綁定

作爲你已經指出,JS在頁面加載時將事件綁定到DOM的元素

如果您的元素不存在負載,JS將無法​​綁定,從而導致問題。爲了解決這個問題,你必須將綁定委託給高於DOM層級,允許JS將事件綁定到與你的容器有關的任何新元素。

+0

嗯,我已經試過了,但它(),「.link」,function(){'#div IS in()「)。我想要說清楚的是,我也嘗試過使用'$(document).on(「click」,「#div .link」,function(){'但是我仍然無法得到我想要的東西。點擊,但不是第一個 –

+0

我可以在my_asset.js中使用相同的功能(點擊相同的鏈接時也是如此)。咖啡「和'my_view.js.erb'中?爲什麼它在資產中而不是在視圖中起作用?他們執行了什麼命令? –

+0

你可以發佈你的HTML爲'#div'和'.link'嗎? –

相關問題