Rails ajax:success callback not triggering in production - ruby-on-rails

Question

My ajax callbacks are not triggering in my production environment. However, they are trigering in development with no errors. I'll simplify things for the sake of discussion.
Let's say I have a link that uses remote: true:
<%= link_to "Add Foo", new_foo_path, remote: true, id: 'new-foo' %>
foos_controller.rb
class FoosController < ApplicationController
def new
#foo = Foo.new
render partial: 'form' if request.xhr?
end
end
Using Chrome's console, I bind to ajax:success:
$(document).on("ajax:success", "#new-foo", function() { console.log("success!"); });
In development this works fine; I get the "success!" message in the Chrome console.
In production, however, it does not. The request is being made, the response is the form partial, but the callback does not fire.
Any ideas?
PS. The following does not work either.
$("#new-foo").bind("ajax:success", function() { console.log("success!"); })
There is no changes to config/environments/production.rb.
EDIT: It turns out ajax:error is being triggered when I click the link in production.
$(document).on("ajax:error", "#new-foo", function() { console.log("error"); });
My production logs don't show any errors, and the network tab in Chrome developer tools is showing a 200 OK response with the partial as the body.
However, the Content-Type header is text/javascript in production but text/html in development. Why is the same code responding with text/javascript in production?

Answer 1

The problem was that the browser was trying to execute the response body as JavaScript since the Content-Type header being sent back was text/javascript rather than text/html.
There are a number of ways to fix this. I chose to use jQuery's $.ajax function to set the dataType of all my ajax calls. This will ask the server to send back text/html.
$.ajaxSetup
dataType: 'html'
However, there are a couple other ways to ask the server for a specific response. See this StackOverflow answer for details.
There is still a lingering question, though. Why was the same code sending back text/html in development but text/javascript in production?

Answer 2

In case Google brought you here (like it did to me) because ajax:success is not working for you in a slightly different situation - when you're using button_to instead of link_to, this might save you some head banging.
Assuming you have this modified ERB:
<%= button_to "Add Foo", new_foo_path, remote: true, class: 'new-foo' %>
This JS won't work:
$(document).on("ajax:success", ".new-foo", function() { console.log("success!"); });
This won't work since the class new-foo is rendered on the input tag, while the data-remote="true" is rendered on the form tag. The ajax:success event fires on the form tag as a result -- not the child input tag, and that's why the console.log will never get called.
To fix this, change the class to form_class in the ERB:
<%= button_to "Add Foo", new_foo_path, remote: true, form_class: 'new-foo' %>