javascript - 新插入的 HTML 不与 Rails 嵌套表单的 JS 事件处理一起作用

Question

我将nested_forms与Rails 4以及turbo-links + jQuery插件一起使用，以使其在页面加载时重新启动。一旦我添加了一个带有应该触发事件的标记的嵌套字段，它就无法执行某些操作，似乎只有初始页面加载时的内容才能触发 js 事件。

示例:

$(document).ready(function(){
  $('.address_input_type').on('change', function(){
    showAppropriateAddressFields(this);
  })
});

因此，如果“.address_input_type”最初位于页面上，但如果随后添加则会失败，则 function showAppropriateAddressFields 将触发。有什么想法吗？

Answer 1

由于元素是新插入的，您需要使用 event delegation :

$(document).ready(function(){
  $(document).on('change', '.address_input_type', function(){
    showAppropriateAddressFields(this);
  })
});

尝试找到比 document 更接近的父元素(例如容器 div)来用作选择器，因为使用 document 效率不高。