如何將點擊事件綁定到尚未在DOM中的對象？

Question

首先，我嘗試了this,and this類似問題的答案，但這似乎對我來說根本不起作用。

我想做一個點擊事件綁定到一個元素，這是通過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.coffee到my_view.js.erb 移動在那裏我可以嵌入render partial

在那裏，在my_view.js.erb，我曾嘗試以下，（當量）的javascript：

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

但它並不適用於第一次點擊的工作，（這樣做，但是，隨後點擊）

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

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

Answer 1

你會結合到容器元件（通常documentbody或），並delegate將事件與待創建的對象：

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

---

綁定

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

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