Rails：通过该部分中的按钮隐藏/关闭渲染的部分

Question

在我的应用中，用户通过AJAX渲染_show.html.erb部分。我现在想要的是在部分内部有一个按钮，点击它时会关闭它。

我遇到的问题：如果我将按钮放在局部之外，一切正常 - 我可以.hide()部分。但是，按钮始终可见（我不想要的）。只要我将按钮放在部分渲染中，关闭部分就不再起作用了。

为什么？我该怎么办？

index.html.erb

<div id="show"></div>

show.js.erb

$('#show').html("<%= escape_javascript (render partial: 'recipes/show') %>");

按钮

<div class="btn" id="close-show">Close</div>

JS

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

Answer 1

由于您要向dom注入代码，因此jQuery事件处理程序不会绑定到新元素。要使其工作，您必须使用$(document).on而不是直接在元素上监听事件 所以将js改为

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

会做到这一点。希望这会有所帮助。

Answer 2

将你的js更改为on on is future元素，这样即使按钮位于你的部分内部它也能正常工作。

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