title: Javascript events firing multiple times in rails app?
body: <p>I am trying to set up a form so that it submits via ajax when I hit <kbd>enter</kbd>. To do this I wanted to trigger the form to submit when the enter key is pressed on the input field. However the keyup event for the enter key keeps firing multiple times if the key is held down any longer than a split second which in turn sends lots of ajax requests causing the browser to crash.</p>
  
  <p>I cannot figure out why the event keeps firing multiple times. Here is the view for the page:</p>
  
  <pre><code>&lt;div class="page-content"&gt;
    &lt;div class="l-edit-header"&gt;
      &lt;h1&gt;Edit&lt;/h1&gt;
      &lt;div class="piece-header"&gt;
        &lt;%= image_tag @piece.user.avatar_url(:small), class: "avatar-small" %&gt;
        &lt;div class="piece-header-info"&gt;
          &lt;h1&gt;&lt;a href="&lt;%= piece_path @piece %&gt;"&gt;&lt;%= @piece.title %&gt;&lt;/a&gt;&lt;/h1&gt;
          &lt;em&gt;
            By &lt;%= link_to @piece.user.username, user_path(@piece.user) %&gt;
            &lt;%= @piece.created_at.strftime("%B %d, %Y") %&gt;
          &lt;/em&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="l-edit-main"&gt;
  
      &lt;div class="piece-main"&gt;
        &lt;%= image_tag @piece.image_url %&gt;
        &lt;p id="piece-description" class="piece-main-description"&gt;&lt;%= @piece.description %&gt;&lt;/p&gt;
        &lt;div class="piece-main-links"&gt;
          &lt;%= link_to "Delete", piece_path(@piece), method: :delete if current_user == @piece.user %&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="l-edit-side"&gt;
      &lt;div class="form-container"&gt;
        &lt;%= form_tag piece_tags_path(@piece), id: "new_tag", remote: true do  %&gt;
          &lt;%= label_tag :new_tag, "New Tag"%&gt;
          &lt;%= text_field_tag :tag, "", data: {autocomplete_source: tags_url}, placeholder: "Add a tag and press Enter" %&gt;
          &lt;div id="tags" class="piece-tags"&gt;
            &lt;%= render partial: "tags/delete_tag_list", locals: {piece: @piece, method: :delete} %&gt;
          &lt;/div&gt;
        &lt;% end %&gt;
      &lt;/div&gt;
  
      &lt;div class="form-container"&gt;
        &lt;%= simple_form_for @piece do |f| %&gt;
          &lt;%= f.association :category, include_blank: false %&gt;
          &lt;%= f.input :published, as: :hidden, input_html: {value: true} %&gt;
          &lt;%= f.input :title %&gt;
          &lt;%= f.input :description %&gt;
  
          &lt;div class="form-submit"&gt;
            &lt;%= f.button :submit, "Publish" %&gt;
          &lt;/div&gt;
        &lt;% end %&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and here is the Javascript for the tag form I am trying to work with:</p>
  
  <pre><code>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();
  });
  </code></pre>
  
  <p>As you can see I have prevented the default behaviour for the <kbd>return</kbd> key being pressed on the form and have added a <code>console.log</code> to count the number of times the event is being triggered.</p>
  
  <p>I thought this could be to do with the fact I am using turbolinks but I can't seem to figure out why.</p>
  
  <p>How can I ensure that the event only gets triggered one time for each time the enter key is pressed? At the moment the Javascript is crashing the browser when I hit <kbd>enter</kbd>.</p>