Three identical AJAX button handlers in three views

Question

In my Rails 4 app I have this event listener:

$('.remove-tag-button').on('click', function () {
    $.ajax({
      type: "POST",
      data: {id: <%= @item.id %>, tag: $(this).data("tag-name")},
      url: "/remove_tag"
    });
  });

in three places and I'm wondering if there's a way to refactor.

I have an items controller with some actions including show, add_tag, and remove_tag.

def show
  @item= Item.find_by_id(params[:id])
end

def add_tag
  (omitted for brevity)
  respond_to do |format|
    format.js
end

def remove_tag
  (omitted for brevity)
  respond_to do |format|
    format.js
end

My show.html.erb has a form with a button to remove tags (class="remove-tag-button") that the event listener is referring to. I have the listener inside script tags at the bottom of my show.html.erb (inside a $(document).ready()) and also inside my add_tag.js.erb and remove_tag.js.erb.

show.html.erb

<div id="taglist">
  <%= render partial: 'items/tag_list', locals: {item: @item} %>
 </div>
 <form action="<%= add_tag_path %>" method="post" id="custom-tag" class="input-group" autocomplete="off" data-remote="true">
   <%= text_field_tag :tag, nil, placeholder: 'Add tag', class: "form-control typeahead", id: 'add-tag' %>
   <span class="input-group-btn">
     <%= submit_tag 'Add', id: "add-button", class: "btn btn-default" %>
    </span>
 </form>
<script>
$(document).ready(function(){

  $('.remove-tag-button').on('click', function () {
    $.ajax({
      type: "POST",
      data: {id: <%= @item.id %>, tag: $(this).data("tag-name")},
      url: "/remove_tag"
    });
  });
});
</script>

add_tag.js.erb

$("#taglist").html('<%= escape_javascript(render partial: "items/tag_list", locals: {item: @item}) %>');

$('.remove-tag-button').on('click', function () {
  $.ajax({
    type: "POST",
    data: {id: <%= @item.id %>, tag: $(this).data("tag-name")},
    url: "/remove_tag"
  });
});

remove_tag.js.erb

$("#taglist").html('<%= escape_javascript(render partial: "items/tag_list", locals: {item: @item}) %>');

$('.remove-tag-button').on('click', function () {
  $.ajax({
    type: "POST",
    data: {id: <%= @item.id %>, tag: $(this).data("tag-name")},
    url: "/remove_tag"
  });
});

items/_tag_list.html.erb

<% item.all_tags_list.each do |t| %>
  <span class="tag-container">
    <%= link_to t, tag_path(t), class: "item-tag" %>
    <% if item.tags_from(current_user).include?(t) %>
      <span>
        <%= link_to "×", '', class: "remove-tag-button", :'data-tag-name' => t, remote: true %>
      </span>
    <% end %>
  </span>
<% end %>

I have 3 instances of this code because a user needs to be able to add and remove tags through AJAX requests while on the page. So it listens when the page loads, then I need it to still be listening after a user has added and/or removed a tag (both which are done through AJAX).

This seems sloppy. I'm wondering if theres a better way to do it.

Answer 1

I was able to get rid of the duplicate code by using event delegation. I changed my event listener to:

$('#taglist').on('click', '.remove-tag-button', function () {
    $.ajax({
      type: "POST",
      data: {id: <%= @item.id %>, tag: $(this).data("tag-name")},
      url: "/remove_tag"
    });
  });