Question

我有一个删除按钮，其中包含remote：true选项：

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

我的destroy方法使用json：

# categories_controller.rb
  def destroy
    @category = Admin::Category.find(params[:id])
    @category.destroy
    save_to_history("The category \"#{@category.name}\" has been destroyed", current_user.id)

    respond_to do |format|
      # You can't retrieve the @categories before attempting to delete one. 
      @categories = Admin::Category.all

      format.json
    end
  end

和我的destroy.json.erb文件看起来像：

#destroy.json.erb
<% self.formats = ["html"] %>
{
  "html":"<%= raw escape_javascript( render :partial => '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>

FULL 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 %>

Answer 1

我不知道如果我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();
});

希望有所帮助：）

成功调用ajax后重新运行JavaScript

1 个答案: