成功调用ajax时重新运行JavaScript

我有一个删除按钮，设置了remote:true选项：

# _categories.html.erb
<%= link_to 'Destroy', category, method: :delete, data: { confirm: 'Are you sure?' }, remote: true %>

我的destroy.json.erb文件如下所示：

#destroy.json.erb
<% self.formats = ["html"] %>
{
  "html":"<%= raw escape_javascript( render :partial => 'categories', :content_type => 'text/html') %>"
}

#destroy.json.erb
{
“html”：“'categories'，：content_type=>'text/html'）%>”
}

现在我的问题是，我让这个JavaScript在页面加载时运行，删除一个初始类别会按预期工作。。。直到数据发生变化。每当用户通过添加新类别或删除类别来更改数据时，我需要再次运行下面的JavaScript。怎么用？请善待你的帮助，我根本不懂JavaScript！哈哈

  <script type='text/javascript'>

    $(function(){
      /* delete category */
      $('a[data-remote]').on('ajax:success', function(event, data, status, xhr){
        $("#dashboard_categories").html(data.html);
      });
    });

  </script>

$（函数（）{
/*删除类别*/
$（'a[data remote]'）。on（'ajax:success'，函数（事件、数据、状态、xhr）{
$（“#dashboard_categories”）.html（data.html）；
});
});

完整index.html.erb：

# index.html.erb
<% title "Categories" %>

<%= form_for @category, remote: true do |f| %>
  <% if @category.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@category.errors.count, "error") %> prohibited this category from being saved:</h2>

      <ul>
      <% @category.errors.full_messages.each do |msg| %>
        <li><%= msg %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <table>
    <tr>
      <td><%= f.text_field :name, placeholder: 'Category Name' %></td>
      <td><%= f.text_field :color, placeholder: 'Colour' %></td>
      <td><%= f.submit %></td>
    </tr>
  </table>
  <br />
<% end %>


<div id="dashboard_categories">
  <%= render partial: 'categories' %>
</div>


<% content_for :javascript do %>
  <script type='text/javascript'>

    $(function(){

      /* new category */
      $('#new_admin_category').on('ajax:success', function(event, data, status, xhr){
        $("#dashboard_categories").html(data.html);
      });

      /* delete category */
      $('a[data-remote]').on('ajax:success', function(event, data, status, xhr){
        $("#dashboard_categories").html(data.html);
      });
    });

  </script>
<% end %>

#index.html.erb
禁止保存此类别：





$（函数（）{
/*新类别*/
$（“#新的管理类别”）。关于（'ajax:success'，函数（事件、数据、状态、xhr）{
$（“#dashboard_categories”）.html（data.html）；
});
/*删除类别*/
$（'a[data remote]'）。on（'ajax:success'，函数（事件、数据、状态、xhr）{
$（“#dashboard_categories”）.html（data.html）；
});
});

我不知道我是否100%理解您，但看起来您希望在AJAX成功后添加事件

$(function () {
    function InitializeEvents() {
        /* new category */
        $('#new_admin_category').on('ajax:success', function (event, data, status, xhr) {
            $("#dashboard_categories").html(data.html);
            InitializeEvents();
        });

        /* delete category */
        $('a[data-remote]').on('ajax:success', function (event, data, status, xhr) {
            $("#dashboard_categories").html(data.html);
            InitializeEvents();
        });
    }
    InitializeEvents();
});

---

希望有帮助：）

即使使用更新程序，您也会收到未列出的类别，因此在服务器端保护自己也是一个好主意。我同意@fotanus，有没有简单的方法扩展我接受的答案？现在不要编辑它，因为这会使现有答案无效。在编写代码时要考虑到这一点。好的，谢谢您的提醒！：）

$(function () {
    function InitializeEvents() {
        /* new category */
        $('#new_admin_category').on('ajax:success', function (event, data, status, xhr) {
            $("#dashboard_categories").html(data.html);
            InitializeEvents();
        });

        /* delete category */
        $('a[data-remote]').on('ajax:success', function (event, data, status, xhr) {
            $("#dashboard_categories").html(data.html);
            InitializeEvents();
        });
    }
    InitializeEvents();
});