javascript - JQuery 选择器在 Ruby on Rails 中由 Ajax XHR 创建的表中的元素上找不到类

Question

使用时

$('.foo').click(function(){  
    alert("I haz class alertz!");  
    return false;
  });  

在 application.js 中，和

<a href = "" class = "foo" id = "foobar_1" >Teh Foobar </a>

在任何用页面初始化的 div 中，当单击“Teh Foobar”时它会发出警报并且不会点击链接。但是，当在 application.js 中使用相同的代码时，

<a href = "" class = "foo" id = "foobar_1" >Teh Foobar </a>

被a返回到一个div中

form_remote_tag

单击时，“Teh Foobar”无法提醒，并用作链接。

发生了什么，我该如何解决？

Answer 1

绑定(bind)事件后添加到文档的新元素不会自动获取这些事件处理程序。解决此问题的一种方法是 - 正如 John Millikin 所说 - 在创建新元素后重新绑定(bind)事件。

另一种标准方式是事件委托(delegate)。因为事件通过其所有父元素在堆栈中上下移动，所以您可以将事件绑定(bind)到将成为所有目标元素的祖先的元素。

例如，这段 jQuery 代码可以工作(对于其他 JavaScript 库，您的语法可能会有所不同):

$(document).ready(function() {
  $('body').click(function(event) {
    if ($(event.target).is('.foo')) { // <- this is the magic
      alert('Something of class foo was clicked.');
      return false;
    }
  });
});

现在当你点击类 foo 的东西时，这个事件将被触发，除非中间的东西捕获事件并取消冒泡。实际上，当几乎任何东西被点击时，事件都会被调用——“if”语句只是过滤掉哪些事件值得提醒。