我如何将单击事件绑定到DOM中还没有的对象

Question

首先，我在此尝试了答案，但这似乎对我来说根本不起作用。

我想在单击事件上执行绑定到通过ajax创建的元素的单击事件，因此它不在DOM中。

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

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

根据jQuery文档：此函数绑定到所有" 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），然后将事件委托给待命的对象：

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

---

绑定

您指出的是，JS将事件绑定到页面上的DOM的元素

如果您的元素不在负载下，则JS无法绑定，从而导致问题。为了解决此问题，您必须将绑定到DOM层次结构中的元素更高，允许JS将事件绑定到与您的容器有关的任何新元素