如何將click事件綁定到尚不在DOM中的對象？

Question

首先，我嘗試了this 和類似問題的答案，但這似乎根本不適合我。

我想對綁定到通過ajax創建的元素的click事件進行處理，因此它一開始不在DOM中。

我注意到，在下面的CoffeeScript my_asset.js.coffee按預期工作：

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

根據JQuery Doc： 此函數綁定到所有“ selected_div” click事件，即使它們稍后通過ajax添加到DOM中，並且do stuff部件也可以正常工作

但是我想：

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

所以，為了做到這一點，我想我應該將$(this).after asset.js.coffee部分從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 %>");
  });
});

但是它不適用於第一次點擊（但是，對於隨后的點擊卻起作用）

我認為這與以下事實有關：頁面首次加載時.link不在DOM中。

為什么會這樣呢？ 那是原因嗎？ 以及如何在視圖中獲得與資產相同的行為？

Answer 1

您將綁定到容器元素（通常是document或body ），並將事件委托給要創建的對象：

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

---

捆綁

正如您所指出的，JS在頁面加載時將事件綁定到DOM的元素

如果您的元素在加載時不存在，則JS將無法綁定，從而導致問題。 要解決此問題，您必須將綁定委托給DOM層次結構中更高的元素，從而允許JS將事件綁定到與您的容器相關的任何新元素