当使用 jQuery-ujs 和 Rails 时删除新记录时不触发 Unobtrusive-JS 功能

Question

Rails: 5.2.0, Ruby: 2.4.1p111, 浏览器: Chrome 66.0.3359.181, jquery-rails gem：4.3.3，禁用 Turbolinks。

我正在学习这个 AJAX on Rails with Unobtrusive JS 教程并已完成，但有一些我无法弄清楚的奇怪行为。

该应用程序使用 UJS 允许用户通过 AJAX 将新记录添加到列表底部，而无需像 Rails 通常那样更新整个页面。添加新记录工作正常，但是当我点击'Delete'时，application.js中的JS函数没有被触发所以似乎什么都没有发生，但是当我刷新页面时记录就消失了。如果我添加一条新记录，刷新页面然后尝试删除记录 JS 被触发并且记录立即从列表中 deleted/removed。

网页很简单：

<!––  index.html.erb ––> 
<h1>Tutorials</h1>

<ul id=tutorials>
  <%= render @tutorials %>
</ul>

<%= form_with model: Tutorial.new, data: {'js-tutorial-form' => true} do |form| %>
  Title <%= form.text_field :title %><br>
  URL <%= form.text_field :url %><br>
  <%= form.submit %>
<% end %>

有一小部分：

<!––  _tutorial.html.erb ––> 
<li data-js-tutorial-id=<%= tutorial.id %>>    
  <%= tutorial.title %> <%= link_to "Delete", tutorial, remote: true, method: :delete %>
</li>

所有 JS 都在 application.js 文件中

$(document).ready(function() {
  $('[data-js-tutorial-form]').on("ajax:success", function(event, data, status, xhr){
    var tutorial = $(xhr.responseText).hide();
    $('#tutorials').append(tutorial);
    tutorial.fadeIn(2000);
  });

     $('[data-js-tutorial-id]').on("ajax:success", function(event, data, status, xhr){
    var tutorial_id = xhr.responseJSON.id;
    $('[data-js-tutorial-id=' + tutorial_id + ']').hide();

  }); 

});

唯一的其他文件是控制器

class TutorialsController < ApplicationController

    def index
        @tutorials = Tutorial.all
    end

    def create
        @tutorial = Tutorial.new(params[:tutorial].permit(:title, :url))
        if @tutorial.save
                render partial: "tutorial", locals: {tutorial: @tutorial}
        end
    end

    def destroy
        @tutorial = Tutorial.find(params[:id])
        @tutorial.destroy
        render json: @tutorial
    end

end

我没有得到的是 HTML 源代码在页面刷新前后是相同的，但我已经使用 Chrome 开发人员工具确认 $('[data -js-tutorial-id]') 除非刷新页面，否则不会被调用。我在控制器中使用了 byebug 来确认它正在正确执行。有什么想法吗？

Answer 1

您的问题是 javascript 侦听器绑定到 <li> 标记，而不是实际的 link。听众从来没有机会开火。

我个人会更改destroy方法，为什么return您刚刚删除的教程？

def destroy
  @tutorial = Tutorial.find(params[:id])
  @tutorial.destroy
  render json: {success: true}
end

其次，你的部分看起来不对，虽然没有测试

<!––  _tutorial.html.erb ––> 
<li>    
  <%= tutorial.title %> <%= link_to "Delete", tutorial, remote: true, method: :delete, "data-js-delete": tutorial.id %>
</li>

这当然需要更改 javascript:

$('[data-js-delete]').on("ajax:success", function(event, data, status, xhr){
  $(event.target).closest('li').hide();
});

当使用 jQuery-ujs 和 Rails 时删除新记录时不触发 Unobtrusive-JS 功能

Unobtrusive-JS function not triggering when new records deleted when using jQuery-ujs with Rails

ajax

jquery

ruby-on-rails

ujs