Why isn't this ajax:success call working? - ruby-on-rails

Question

I know there's a ton of threads about this, but I can't seem to figure out what's broken here. I have a remote link that calls a like method.
When I click the like link...
What's happens:
The like is created (as expected).
The page does not refresh (as expected).
What should happen:
Everything above, plus the content change in like.js.erb. I've added a console.log to this file and it does not show up when clicking the like link.
_like.html.erb
<% recipe = recipe || #recipe %>
<%= link_to unlike_recipe_path(recipe), remote: true, class: "recipe-card__like like" do %>
<i class="heart icon"></i>
<% end %>
note: the partial is rendered both on a show page and within an index, which is why I use the || statement.
like.js.erb
$('.like').bind('ajax:success', function(){
console.log('like clicked');
$(this).closest('.like').hide();
$(this).closest('.like-container').html('<%= escape_javascript (render partial: 'unlike', recipe: #recipe ) %>');
});
routes.rb
resources :recipes do
resources :likes
member do
get "/like", to: "recipes#like"
end
end
recipes_controller.rb
def like
#recipe = Recipe.find(params[:id])
#like = #recipe.likes.create(recipe_id: #recipe.id, user_id: current_user["uid"])
respond_to do |format|
format.html
format.js
end
end
application.js
//= require jquery
//= require jquery_ujs
//= require rails-ujs
//= require turbolinks
//= require semantic-ui/sidebar
//= require_tree .

Answer 1

You can do it in many ways using JS/Html/Ajax.
#like.js.erb
#if wanna validate the request success or fail use #like
# just make sure #like is not string type otherwise it will always success in JS file.
if("<%= #like %>"){
console.log('like clicked');
$(this).closest('.like').hide();
$(this).closest('.like-container').html('<%= escape_javascript (render partial: 'unlike', recipe: #recipe ) %>');
}
Also, in controller no need recipe_id: #recipe.id. It's supposed to assign automatically.
#like = #recipe.likes.create(user_id: current_user["uid"])

Answer 2

Like I said in comment, the moment you .bind('ajax:succeed') is already to late because this file is indeed the result. Your erb file will be filled before rendering the output so you could do
<% if #result == "success" %>
console.log('like clicked')
$(this).closest('.like').hide();
$(this).closest('.like-container').html('<%= escape_javascript (render partial: 'unlike', recipe: #recipe ) %>');
<% else %>
console.log('something went wrong, this person has to many likes')
<% end %>
where #result is your controller variable

Answer 3

My link was calling the unlike method instead of the like method. Simple typo.
Original
<% recipe = recipe || #recipe %>
<%= link_to unlike_recipe_path(recipe), remote: true, class: "recipe-card__like like" do %>
<i class="heart icon"></i>
<% end %>
What it should be
<% recipe = recipe || #recipe %>
<%= link_to like_recipe_path(recipe), remote: true, class: "recipe-card__like like" do %>
<i class="heart icon"></i>
<% end %>