Rails渲染partial后原绑定的jQuery click点击事件无响应问题

问题原因 #

这一现象和$(document).ready()的运行机制没有关系，属于jQuery事件绑定的常见问题：

• 你初始使用$('#business_costs_nav_item').click(function(){...})写法时，是给页面首次加载完成后、已经存在的对应DOM节点直接绑定了点击事件
• 后续执行$('#stages-nav').html(...)替换导航内容时，原本绑定了事件的旧DOM节点被整体移除，新渲染出来的节点哪怕ID、结构和旧节点完全一致，也是全新的DOM对象，没有绑定过对应的点击事件，因此原有逻辑不生效

解决方案 #

无需重复加载JavaScript代码，也不用每次渲染完导航后重新绑定事件，改用jQuery事件委托写法即可：
将application.js中的绑定逻辑修改为委托给始终不会被删除的父级元素#stages-nav：

$(document).ready(function() {
  // BUSINESS COSTS 事件委托写法
  $('#stages-nav').on('click', '#business_costs_nav_item', function() {
    slide_current_to_new('business_costs')
  })
  // 其他导航项绑定可以复用同一逻辑，示例：
  // $('#stages-nav').on('click', '#wedding_costs_nav_items', function() {
  //   slide_current_to_new('wedding_costs')
  // })
});

事件委托依赖浏览器的事件冒泡机制：子元素的点击事件会向上传递到父元素，jQuery会自动校验触发事件的元素是否匹配你指定的目标选择器，匹配就会执行对应的回调逻辑。这种写法对初始加载、后续动态渲染的元素都能生效。

内容的提问来源于stack exchange，提问作者J. Naylor