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

我正在尝试设置一个表单，以便在我按下enter键时通过ajax提交。为此，我想在输入字段上按下enter键时触发表单提交。但是，如果按住enter键的时间超过一秒钟，则enter键的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>

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

我认为这可能与我使用TurboLink有关，但我似乎不明白为什么

---

如何确保每次按下enter键时仅触发一次事件？当我按下enter键时，Javascript正在使浏览器崩溃。

您正在调用tagReplace.init；如@Dezl在his中解释的，如果您已将事件委托给文档，请确保将它们附加到ready函数之外，否则它们将在每个页面上反弹：加载事件导致相同的函数多次运行。

您正在调用tagReplace.init；2次，正如@Dezl在his中解释的那样，如果您已将事件绑定到文档，请确保将它们附加到ready函数之外，否则它们将在每个页面上反弹：load event导致相同的函数多次运行。

为什么要调用tagReplace.init；在tagReplace.init；？这个答案可能有助于您为什么调用tagReplace.init；在tagReplace.init；？这个答案可能会有帮助，谢谢。为什么这会导致事件被多次触发？我认为，由于init函数只是在ajax上分配回调：success而不是实际触发回调，因此不会导致这样的循环？因此每次调用init时，它都会创建两个无限循环，而不是一个。这就像一道彩虹，但更糟糕的是。哈哈，但是ajax中的init函数不是只有在ajax请求成功返回后才能运行成功回调吗？这难道不意味着它们不是无限循环吗？对不起，如果这是显而易见的，我只是想检查一下我的理解。感谢你的帮助：谢谢。为什么这会导致事件被多次触发？我认为，由于init函数只是在ajax上分配回调：success而不是实际触发回调，因此不会导致这样的循环？因此每次调用init时，它都会创建两个无限循环，而不是一个。这就像一道彩虹，但更糟糕的是。哈哈，但是ajax中的init函数不是只有在ajax请求成功返回后才能运行成功回调吗？这难道不意味着它们不是无限循环吗？对不起，如果这是显而易见的，我只是想检查一下我的理解。感谢您的帮助：

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();
});