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

Question

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

示例：

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

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

Answer 1

由于新插入了元素，您需要使用event delegation：

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

[尝试查找比document更近的父元素（例如容器div）用作选择器，因为使用document效率不高。

Answer 2

如果在页面加载时查询DOM的类，则将返回节点的类似数组的对象，当以后添加具有该类的其他节点时，这些对象将不会自我更新。从头开始将其附加到页面上，并将其样式设置为“显示：无”。