新插入的HTML不适用于用Rails嵌套形式处理JS事件

Question

我使用nested_forms与Rails 4连同turbo链接+ jQuery插件使其重新启动页面加载。一旦我添加了一个带有应该触发事件的标记的嵌套字段，它就会失败，似乎只有初始页面加载上的内容才能触发js事件。

示例：

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

因此，如果“.address_input_type”最初出现在页面上，但在添加之后会失败，则会触发.address_input_type。有什么想法吗？

Answer 1

由于元素是新插入的，您需要使用事件委托

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

尝试找到一个比document (例如容器div)更接近的父元素作为选择器，因为使用document不是很有效。

Answer 2

如果在页面加载时查询类的DOM，则将返回一个类似数组的节点对象，该对象在以后添加该类的其他节点时不会自动更新。从一开始就将其添加到页面中，并设置它的样式"display: none“。