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

Question

首先，我尝试了this、and this 类似问题中的答案，但这似乎对我根本不起作用。

我想对绑定到通过 ajax 创建的元素的点击事件做一些事情，所以它一开始不在 DOM 中。

我注意到my_asset.js.coffee 中的以下咖啡脚本按预期工作：

$ ->  
  $('#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 层次结构中的元素更高，从而允许 JS 将事件绑定到与您的容器相关的任何新元素