Rails技术问询：AJAX渲染局部视图内按钮无法隐藏视图的解决方法

这个问题我做Rails项目时也踩过同款坑，核心原因是动态生成元素的事件绑定时机不对：

你写的$(document).ready()里的点击事件绑定，是在页面初始加载完成时执行的。但关闭按钮是通过AJAX动态渲染到#show容器里的，页面刚加载时这个按钮根本不存在，所以当时的事件绑定找不到目标元素；等按钮后来被渲染出来，也没有自动绑定上点击事件，自然就失效了。

下面给你几种可行的解决办法：

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

把事件绑定到已经存在的父元素（比如#show或者document）上，利用事件冒泡的特性，监听动态生成元素的点击事件。修改你的JS代码为：

$(document).on('click', '#close-show', function() {
  $("#show").hide();
});

这种方式的好处是，不管#close-show按钮什么时候被动态添加到页面里，只要点击事件冒泡到document，就能触发隐藏操作，不用每次渲染都重新绑定事件，非常灵活。

2. 在AJAX渲染完成后绑定事件 #

既然按钮是在show.js.erb里渲染出来的，那我们可以把事件绑定代码也放到这个文件里，这样每次渲染完局部视图，按钮已经存在了，再绑定事件就没问题了：

$('#show').html("<%= escape_javascript (render partial: 'recipes/show') %>");
// 渲染完成后立即绑定点击事件
$("#close-show").click(function(){ 
  $("#show").hide(); 
});

3. 使用内联点击事件（简单直接） #

直接在按钮元素上写内联的点击事件，这样按钮被渲染出来时就自带事件逻辑，不需要额外的绑定操作：

<div class="btn" id="close-show" onclick="$('#show').hide();">Close</div>

这种方式虽然简单，但如果逻辑复杂的话，代码耦合度会比较高，适合简单的隐藏操作。

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