Jquery ajax 调用在 Rails 中已渲染的部分中不起作用

Question

我正在为 Jquery + Rails 使用出色的 Nicolas Alpi 指令，我的 application.js 是：

jQuery.ajaxSetup({
  'beforeSend': function(xhr) {xhr.setRequestHeader("Accept", "text/javascript")}
})


function _ajax_request(url, data, callback, type, method) {
    if (jQuery.isFunction(data)) {
        callback = data;
        data = {};
    }
    return jQuery.ajax({
        type: method,
        url: url,
        data: data,
        success: callback,
        dataType: type
        });
}

jQuery.extend({
    put: function(url, data, callback, type) {
        return _ajax_request(url, data, callback, type, 'PUT');
    },
    delete_: function(url, data, callback, type) {
        return _ajax_request(url, data, callback, type, 'DELETE');
    }
});

/*
Submit a form with Ajax
Use the class ajaxForm in your form declaration
<% form_for @comment,:html => {:class => "ajaxForm"} do |f| -%>
*/
jQuery.fn.submitWithAjax = function() {
  this.unbind('submit', false);
  this.submit(function() {
    $.post(this.action, $(this).serialize(), null, "script");
    return false;
  })

  return this;
};



/*
Retreive a page with get
Use the class get in your link declaration
<%= link_to 'My link', my_path(),:class => "get" %>
*/
jQuery.fn.getWithAjax = function() {
  this.unbind('click', false);
  this.click(function() {
    $.get($(this).attr("href"), $(this).serialize(), null, "script");
    return false;
  })
  return this;
};

/*
Post data via html
Use the class post in your link declaration
<%= link_to 'My link', my_new_path(),:class => "post" %>
*/
jQuery.fn.postWithAjax = function() {
  this.unbind('click', false);
  this.click(function() {
    $.post($(this).attr("href"), $(this).serialize(), null, "script");
    return false;
  })
  return this;
};

/*
Update/Put data via html
Use the class put in your link declaration
<%= link_to 'My link', my_update_path(data),:class => "put",:method => :put %>
*/
jQuery.fn.putWithAjax = function() {
  this.unbind('click', false);
  this.click(function() {
    $.put($(this).attr("href"), $(this).serialize(), null, "script");
    return false;
  })
  return this;
};

/*
Delete data
Use the class delete in your link declaration
<%= link_to 'My link', my_destroy_path(data),:class => "delete",:method => :delete %>
*/
jQuery.fn.deleteWithAjax = function() {
  this.removeAttr('onclick');
  this.unbind('click', false);
  this.click(function() {
    $.delete_($(this).attr("href"), $(this).serialize(), null, "script");
    return false;
  })
  return this;
};

/*
Ajaxify all the links on the page.
This function is called when the page is loaded. You'll probaly need to call it again when you write render new datas that need to be ajaxyfied.'
*/
function ajaxLinks(){
    $('.ajaxForm').submitWithAjax();
    $('a.get').getWithAjax();
    $('a.post').postWithAjax();
    $('a.put').putWithAjax();
    $('a.delete').deleteWithAjax();
}

$(document).ready(function() {
// All non-GET requests will add the authenticity token
 $(document).ajaxSend(function(event, request, settings) {
       if (typeof(window.AUTH_TOKEN) == "undefined") return;
       // IE6 fix for http://dev.jquery.com/ticket/3155
       if (settings.type == 'GET' || settings.type == 'get') return;

       settings.data = settings.data || "";
       settings.data += (settings.data ? "&" : "") + "authenticity_token=" + encodeURIComponent(window.AUTH_TOKEN);
     });

  ajaxLinks();
});

我的任务控制器有：

 def followship
    @task = Task.find(params[:id])

    respond_to do |format|
        # some logic
        format.js {render :content_type => 'text/javascript' }
    end
  end

我的followship.js.erb：

<% if @new_follower %>
  $("#followers_list").append("<%= escape_javascript(render :partial => 'new_follower', :object => @new_follower, :locals => {:task => @task}) %>");
  $("#_user_id option[value='<%= @new_follower.id.to_s %>']").remove();
  $("#follower_<%= @new_follower.id.to_s %>").delay(500).effect("highlight", {}, 2000);
<% else %>
   $("#follower_<%= @id_to_remove %>").fadeOut("slow");
<% end %>
<% flash.discard %>

_new_follower.erb 部分：

<li id='follower_<%= @new_follower.id.to_s %>'>
  <%= @new_follower.name %>
  <%= link_to "[x]", {:controller => "tasks", :action => "followship", :id => @task, :user_id => @new_follower.id, :to_do => "exclude"}, :class => "get" if @new_follower == current_user %>
</li>

问题：

当我将新的追随者添加到任务中时，一切正常。一个新的 li 被渲染到列表并突出显示新用户。但是，当我尝试使用 [x] 链接排除自己时，使用上次 ajax 调用传递的一小部分呈现，页面被重新加载，只有脚本的文本被呈现到屏幕上：（例如）

$("#follower_2").fadeOut("slow");

如果我重新加载页面并且在不使用部分的情况下呈现新的关注者，那么一切正常。淡出有效。

请帮忙。提前致谢。 顺便说一句：Rails 2.3.8

Answer 1

对 application.js 使用这种方法解决了我的问题：

http://www.danhawkins.me.uk/2010/05/unobtrusive-javascript-with-rails-2-3-5/

谢谢。