preventDefault（）を呼び出すときにAJAXフォームを再読み込みするページ

Question

ノード/エクスプレス/モンゴーアプリがあり、AJAX呼び出しをしようとしていますが、データは保存されますが、AJAXのpreventDefault()コール。なぜこうなった？ここで

var categoryButton = function(){ 
event.preventDefault(); 
$("#add_category_form").submit(function (event){ 
    event.preventDefault(); 

    $.ajax({      //this gets the ID, you have to add a data-id="user._id" to the input you want to send the request from. 
     url: $("add_category_form").attr("action"), 
     type: "POST", 
     dataType: json, 
     done: function (result) { 
      alert("successful"); 
      //console.log(result.categories); 
     }, 
     fail: function (fail){ 
      console.log(fail); 
     } 
    }); 
}); 
}; 

はHTML

<section id="event_categories_section" style="display:none;" class="col-md-6"> 
        <form id="add_category_form" onsubmit="categoryButton" method="POST" action="/user/categories/<%=user._id%>"> 
         <label for="input_category_name">Add a category for your Events</label> 
         <div class="input-group"> 
          <div class="input-group-btn"> 
           <input type="submit" id="add_category_button" value="Add Category!" class="btn btn-primary dropdown-toggle"></input> 
          </div> 
          <input class="form-control" id="input_category_name" name="user[category]" placeholder="Category Name" required type="text" minlength="2" data-id="<%= user._id %>"> 
         </div> 
        </form> 
        <hr> 
        <div class="col-md-6"> 
         <h3>List of Categories</h3> 
         <section class="well" id="list_category_section"> 
          <% user.categories.forEach(function(category){ %> 
          <p><%= category %></p> 
          <% }); %> 
         </section> 

        </div> 
       </section> 

Answer 1

使用return falseあるご.submit()関数の最後にjQueryのイベントハンドラ内から

戻りfalseが効果的に両方event.preventDefaultを呼び出すのと同じで、渡されたjQuery.Eventオブジェクトのevent.stopPropagation。

event.preventDefault()は、デフォルトイベントの発生を防止します。

event.stopPropagation()は、イベントのバブリングを防止します。

Answer 2

更新あなたのコードとチェック

<section id="event_categories_section" style="display:none;" class="col-md-6"> 
        <form id="add_category_form" method="POST" action="/user/categories/<%=user._id%>"> 
         <label for="input_category_name">Add a category for your Events</label> 
         <div class="input-group"> 
          <div class="input-group-btn"> 
           <input type="submit" id="add_category_button" value="Add Category!" class="btn btn-primary dropdown-toggle"></input> 
          </div> 
          <input class="form-control" id="input_category_name" name="user[category]" placeholder="Category Name" required type="text" minlength="2" data-id="<%= user._id %>"> 
         </div> 
        </form> 
        <hr> 
        <div class="col-md-6"> 
         <h3>List of Categories</h3> 
         <section class="well" id="list_category_section"> 
          <% user.categories.forEach(function(category){ %> 
          <p><%= category %></p> 
          <% }); %> 
         </section> 

        </div> 
       </section> 

Ajaxのセクションでは、： -

$(function() { 
$("#add_category_form").submit(function (event){ 
    event.preventDefault(); 

    $.ajax({      //this gets the ID, you have to add a data-id="user._id" to the input you want to send the request from. 
     url: $("add_category_form").attr("action"), 
     type: "POST", 
     dataType: json, 
     done: function (result) { 
      alert("successful"); 
      //console.log(result.categories); 
     }, 
     fail: function (fail){ 
      console.log(fail); 
     } 
    }); 
}); 
}); 

Answer 3

はフォームからをonSubmit属性を削除し、（categoryButtonを呼び出します）がドキュメントの準備ができたら機能し、送信イベントはフォームとバインドされ、すべて正常に動作します。 私はあなたのコードをちょっと修正しました。試してみてください。

$(function() { 
    categoryButton(); 
    }) 
var categoryButton = function(){ 
$("#add_category_form").submit(function (event){ 
    event.preventDefault(); 

    $.ajax({      //this gets the ID, you have to add a data-id="user._id" to the input you want to send the request from. 
     url: $("add_category_form").attr("action"), 
     type: "POST", 
     dataType: json, 
     done: function (result) { 
      alert("successful"); 
      //console.log(result.categories); 
     }, 
     fail: function (fail){ 
      console.log(fail); 
     } 
    }); 
}); 
};