Rails - 为什么远程提交我的表单后 jQuery 不加载

Question

为了简单起见，我有一个更新部分的表单。那里没什么特别的。在部分中，我有一个 jQuery 可排序列表。在更新表单之前，我可以毫无问题地在列表中拖动东西。

但是，在我更新列表后，好像 js 没有重新加载，我必须刷新整个页面才能再次滚动。

我已经尝试了所有方法，甚至借用了demo jQuery application from Ryan Bates Esq. over here. 在我在部分中添加了一些 js shizzle 之后，这也不起作用。

我确信这很简单，但我是一个 ajax / jQuery 新手，我真的很挣扎。

查看：

#test_one
  = render "test_one"

部分“test_one”

= form_for @location, :remote => true do |f|
  %table
    %tr= collection_select(:location, :type_ids, Type.all, :id, :name, {:prompt => true}, :multiple => true, :class=>"chzn-select")
     %tr
       %td
         %ul#types.unstyled{"data-update-url" => sort_types_locations_url}
           - @types.each do |type|
             = content_tag_for :li, type do
               %span.handle
                 [Drag]
               = type.name

update.js.erb

$("#test_one").html('<%= escape_javascript render("test_two") %>');

在我的控制器中：

  def update
    @location = Location.find(params[:id])
    @types = @location.types.order('location_types.position').limit(2)
    respond_to do |format|
      if @location.update_attributes!(params[:location])
        flash[:notice] = 'Settings updated successfully'
        format.html { redirect_to edit_location_path }
        format.js
      else
        format.html { render action: "edit_access" }
        format.js { render action: "update_access_errors" }
      end
    end
  end

最后在locations.js.coffee

jQuery ->
  $('#types').sortable(
      axis: 'y'
      update: ->
        $.post($(this).data('update-url'), $(this).sortable('serialize'))
      )

更新有效，我没有收到任何错误，我的控制台中也没有任何内容。现在我迷失了很多 - 我如何在更新记录后让 js 重新加载？

Answer 1

原因是，您的自定义 js（关于可排序）已加载到准备好的文档中，并且一旦部分更新就不会再次触发。

解决方案是：将你的自定义 js 包装成一个函数。当文档准备好并发生更新时调用此函数。

# locations.js.coffee
$ ->
  $(document).custom_js()

$.fn.custom_js ->
  $('#types').sortable(
    axis: 'y'
    update: ->
      $.post($(this).data('update-url'), $(this).sortable('serialize'))
    )

# update.js.erb
$("#test_one").html('<%= escape_javascript render("test_two") %>');
$(document).custom_js();

关于自定义 js 功能的旁注：这里不需要包装所有自定义代码，只需与 Ajax 将添加/更新的内容相关的部分即可。