Question

我正在尝试设置一个表单，以便在我按Enter键时通过ajax提交。为此，我想在输入字段上按下回车键时触发表单提交。但是，如果按键被按下的时间长于分秒，则输入键的keyup事件将持续多次触发，这反过来会发送大量的ajax请求，从而导致浏览器崩溃。

我无法弄清楚为什么事件会持续多次发射。这是页面的视图......

<div class="page-content">
  <div class="l-edit-header">
    <h1>Edit</h1>
    <div class="piece-header">
      <%= image_tag @piece.user.avatar_url(:small), class: "avatar-small" %>
      <div class="piece-header-info">
        <h1><a href="<%= piece_path @piece %>"><%= @piece.title %></a></h1>
        <em>
          By <%= link_to @piece.user.username, user_path(@piece.user) %>
          <%= @piece.created_at.strftime("%B %d, %Y") %>
        </em>
      </div>
    </div>
  </div>

  <div class="l-edit-main">

    <div class="piece-main">
      <%= image_tag @piece.image_url %>
      <p id="piece-description" class="piece-main-description"><%= @piece.description %></p>
      <div class="piece-main-links">
        <%= link_to "Delete", piece_path(@piece), method: :delete if current_user == @piece.user %>
      </div>
    </div>
  </div>

  <div class="l-edit-side">
    <div class="form-container">
      <%= form_tag piece_tags_path(@piece), id: "new_tag", remote: true do  %>
        <%= label_tag :new_tag, "New Tag"%>
        <%= text_field_tag :tag, "", data: {autocomplete_source: tags_url}, placeholder: "Add a tag and press Enter" %>
        <div id="tags" class="piece-tags">
          <%= render partial: "tags/delete_tag_list", locals: {piece: @piece, method: :delete} %>
        </div>
      <% end %>
    </div>

    <div class="form-container">
      <%= simple_form_for @piece do |f| %>
        <%= f.association :category, include_blank: false %>
        <%= f.input :published, as: :hidden, input_html: {value: true} %>
        <%= f.input :title %>
        <%= f.input :description %>

        <div class="form-submit">
          <%= f.button :submit, "Publish" %>
        </div>
      <% end %>
    </div>
  </div>
</div>

以下是我正在尝试使用的代码表单的javascript ...

var tagReplace = {
    init: function(){
        //Replace "#tags" with new updated tags html on tag create
        $("#new_tag").on("ajax:success", function(e, data, status, xhr){
            $("#tags").html(data);
            tagReplace.init();
            $("#tag").val("");
        });

        //Replace "#tags" with new updated tags html on teg delete
        $("#tags a[data-remote]").on("ajax:success", function(e, data, status, xhr){
            $("#tags").html(data);
            tagReplace.init();
        });


        $("#new_tag").on("keydown", function(e){
            if (e.which == 13){
                event.preventDefault();
            }
        });

        $("#tag").on("keyup", function(e){
            if (e.which == 13){
                $("#new_tag").submit();
                console.log("pressed enter on new tag");
            }
        });

    },
    getTags: function(){
        $.get( $("#tag").data("autocomplete-source"), tagReplace.initAutocomplete);
    },
    initAutocomplete: function(tagsArray){
        $("#tag").autocomplete({
            source: tagsArray
        });
    }
};

//Initalize
$(document).on('ready page:load', function () {
    tagReplace.init();
});

正如您所看到的，我已经阻止了在表单上按下返回键的默认行为，并添加了一个console.log来计算触发事件的次数。

我认为这可能与我使用turbolinks的事实有关，但我似乎无法弄清楚原因。

如何确保每次按下回车键时只触发一次事件？目前，当我点击输入时，javascript正在崩溃浏览器。

Answer 1

您正在调用tagReplace.init（）;本身就是2次，正如@Dezl在他的answer related to this topic中解释的那样，＆＃34;如果你已经委托绑定到文档的事件，请确保将它们附加到ready函数之外，否则它们会在每个函数上反弹page：load event（导致多次运行相同的函数）。＆＃34;

在rails应用中多次触发Javascript事件？

1 个答案: