Question

在我的Rails 4应用程序中，我有这个事件监听器：

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

在三个地方，我想知道是否有重构方法。

我有一个项目控制器，其中包含show，add_tag和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

我的show.html.erb有一个表单，其中包含一个按钮，用于删除事件侦听器所引用的标记（class="remove-tag-button"）。我在show.html.erb（$(document).ready()内部）的底部以及我的add_tag.js.erb和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 %>

我有3个此代码实例，因为用户需要能够在页面上通过AJAX请求添加和删除标记。所以它在页面加载时监听，然后我需要它在用户添加和/或删除标签后仍然在监听（两者都是通过AJAX完成的）。

这似乎很草率。我想知道是否有更好的方法。

Answer 1

我可以使用 事件委派 来删除重复的代码。我将我的事件监听器改为：

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

非常感谢@charlietfl。很酷！

在$（document）.ready（）和ajax请求

1 个答案: