如何将click事件绑定到尚未在DOM中的对象？

Question

首先，我尝试了this，and this类似问题的答案，但这似乎对我没有用。

我想在绑定到通过ajax创建的元素的click事件上执行操作，因此它最初不在DOM中。

我注意到my_asset.js.coffee中的以下coffeescript按预期工作：

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

根据JQuery Doc： 此函数绑定到所有“selected_div”点击事件，即使它们稍后通过ajax添加到DOM 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 %>");
  });
});

但它不适用于第一次点击（但是，对于后续点击确实如此）

我认为这与第一次加载页面时.link不在DOM中的事实有关。

为什么会这样？这是原因吗？我怎样才能在视图中看到与资产相同的行为？

Answer 1

您将绑定到容器元素（通常为document或body），并将事件delegate绑定到要创建的对象：

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

---

<强>装订

正如您所指出的，JS在页面加载

上将事件绑定到DOM的元素

如果您的元素在加载时不存在，JS将无法绑定，从而导致问题。要解决此问题，您必须将绑定委派给DOM层次结构中的 higher 元素，允许JS将事件绑定到与容器相关的任何新元素