javascript - 成功后 Ajax 请求如何操作 DOM 并忽略 Ruby on rails 中的递归调用

Question

在 Rails 中，我们使用远程属性发出 ajax 请求，然后执行 js.erb 文件。这是一些数据。这里如果我删除一行，则 div 计数应该减少 1。刷新页面后第一次调用就可以了。但是当我第二次这样做时，该函数被调用了两次，第三次删除它被调用了 3 次。我包括了一些截图。我的问题不在 ajax 中。问题是在我添加控制器和 js 代码时发生的。

浏览器： 点击她查看图片

控制器代码：

  def destroy
     @expense.destroy
  end

销毁.js.erb

$('.destroy_link').on('ajax:complete', function () {
    $(this).closest('tr').fadeOut();
    let btn = $(this).parents().eq(6).find('.accordion'); //find selector
    let str = btn.text(); //string
    let number = str.match(/(\d+)/); //extract integer
    console.log(number[0]); //print the countin console
    number[0] -= 1;
    let arr = str.split(' ');
    btn.text(`${arr[0]} (${number[0]})`);
});

HTML 代码：

<div>
    <button class="accordion btn btn-warning" data-toggle="collapse" data-target="#pending">Pending
      (<%= @pending_expenses.count %>)
    </button>
    <div class="collapse show in" id="pending">
      <% @number = expenses.offset + 1 %>
<div class="table-responsive-sm">
  <table class="table table-bordered">
    <thead>
    <tr>
      <th>Sl</th>
      <th>Name</th>
      <th>Employee</th>
      <th>Cost</th>
      <th>Category</th>
      <th style="text-align: center;">Action</th>
    </tr>
    </thead>
    <% expenses.each do |expense| %>
         <tr>
  <td><%= @number %> </td>
  <% @number += 1 %>
  <td><%= expense.product_name %></td>
  <td><%= expense.user.name %></td>
  <td><%= taka(expense.cost) %></td>
  <td><%= expense.category.name %></td>
  <td style="text-align: center;">

    <% if can? :approve, expense %>
      <% if expense.approved? %>
        <%= link_to approve_expense_path(expense), class: "undo_link", method: :put, remote: true, data: {confirm: 'Are you sure?'} do %>
          <i class="fa fa-undo" title="Undo"></i>
        <% end %>
        |
      <% else %>
        <%= link_to approve_expense_path(expense), class: "approve_link", method: :put, remote: true, data: {confirm: 'Are you sure to Approve?'} do %>
          <i class="fa fa-check" title="Approve"></i>
        <% end %>
        |
      <% end %>
    <% end %>

    <% if can? :reject, expense %>
      <%= link_to reject_expense_path(expense), class: "reject_link", method: :put, remote: true, data: {confirm: 'Are you sure to Reject?'} do %>
        <i class="fa fa-ban" title="Reject"></i>
      <% end %>
      |
    <% end %>

    <% if can? :read, expense %>
      <%= link_to expense_path(expense), class: "show_link" do %>
        <i class="fa fa-eye" title="Details"></i>
      <% end %>
    <% end %>

    <% if can? :update, expense %>|
      <%= link_to edit_expense_path(expense), class: "edit_link" do %>
        <i class="fa fa-edit" title="Edit"></i>
      <% end %>
    <% end %>

    <% if can? :destroy, expense %>
      |<%= link_to expense_path(expense), class: "destroy_link", method: :delete, remote: true, data: {confirm: 'Are you sure?'} do %>
        <i class="fa fa-trash" title="Drop"></i>
      <% end %>
    <% end %>

  </td>
</tr>
    <% end %>
  </table>
</div>

    </div>
  </div>

安慰 ：

[Violation] 'click' handler took 1601ms
VM284:12 3
rails-ujs.js:164 [Violation] 'click' handler took 1658ms
VM284:12 2
VM289:12 1
rails-ujs.js:164 [Violation] 'click' handler took 1043ms
VM284:12 0
VM289:12 1
VM295:12 0

标签： javascriptjqueryruby-on-railsajax