jQuery点击事件失效：表单提交后Rails页面按钮点击无响应

这是个很常见的Rails前端事件绑定失效问题，我来帮你拆解清楚：

为什么提交表单后点击按钮没反应？ #

首次加载页面时，你的jQuery代码直接把点击事件绑定到了当时DOM中存在的#carnum_driver_plus按钮上。但当你提交表单后，Rails默认会通过Turbo（旧版本是jQuery UJS）以局部更新的方式重新渲染页面内容——原来的按钮元素会被新生成的DOM节点替换掉，而新节点并没有继承之前绑定的点击事件，所以再次点击就不会触发alert了。

解决办法 #

有两种常用且优雅的方式修复这个问题：

1. 使用事件委托（推荐） #

把事件绑定到一个不会被替换的父元素（比如document或者表单本身）上，利用事件冒泡机制来捕获按钮的点击事件。这样不管按钮是首次加载还是后来重新渲染的，事件都能正常触发：

<script>
  $(document).on('click', '#carnum_driver_plus', function () {
    alert("click done");
  });
</script>

2. 监听Turbo页面更新事件 #

如果你想保留直接绑定元素的写法，可以监听Turbo的turbo:load事件——这个事件会在页面首次加载、Turbo导航完成、表单提交后页面更新时触发，每次触发时重新给按钮绑定事件：

<script>
  document.addEventListener('turbo:load', function() {
    $('#carnum_driver_plus').click(function () {
      alert("click done");
    });
  });
</script>

这两种方法都能解决你的问题，其中事件委托的性能和兼容性更优，是推荐的做法。

内容的提问来源于stack exchange，提问作者Sven Kirsten