e.preventDefault의 JQuery와 내가 함께 일하고 있어요 JS 스크립트에 문제가

Question

다양한 형태와 버튼을 작동하지 페이지 및 스크립트에서 폼의 작업 특성으로 리디렉션하지 않고 대신 AJAX를 사용하고 콘솔에서 정보를 검색 할 수 있도록하기 위해 제출 이벤트의 시작 부분에 e.preventDefault를 사용합니다. 파일의 모든에서 preventDefault 작업은 여기있다 : 그것에

// Various buttons to show/hide things, here e.PreventDefault works 

$('#AddCategoryLinkToggle').on('click', function(e) { 
    e.preventDefault(); 
    $('#addACategoryBlock').fadeIn(); 
}); 

$('#AddBrandLinkToggle').on('click', function(e) { 
    e.preventDefault(); 
    $('#addABrandBlock').fadeIn(); 
}); 

$('#CloseAddCategory').on('click', function(e) { 
    e.preventDefault(); 
     $('#addACategoryBlock').fadeOut(); 
    }); 
$('#CloseAddBrand').on('click', function(e) { 
    e.preventDefault(); 
     $('#addABrandBlock').fadeOut(); 
    }); 

// end various buttons section 

// FIRST AJAX SCRIPT, this e.PreventDefault works 

$('#AddCategoryForm').on('submit', function(e) { 
    // Stop the browser from submitting the form. 
    e.preventDefault(); 
    var postData = $(this).serializeArray(); 
    var Actionurl = $(this).attr('action'); 
    $.post(Actionurl, postData) 
    .fail(function(data) { 
     $('#AddCategoryError').fadeIn(); 
     $('#AddCategoryForm').fadeOut(); 
    }) 
     .done(function(data) { 
      //console.log(data); 
      $('#AddCategoryForm').fadeOut(); 
      $('#AddCategorySuccess').fadeIn(); 
      setTimeout(function(){ location.reload(); }, 2000); 

    }); 
    // TODO 
}); 

// 2nd AJAX script, it works since it's the same as the first one 

$('#AddBrandForm').on('submit', function(e) { 
    // Stop the browser from submitting the form. 
    e.preventDefault(); 
    var postData = $(this).serializeArray(); 
    var Actionurl = $(this).attr('action'); 
    $.post(Actionurl, postData) 
    .fail(function(data) { 
     $('#AddBrandError').fadeIn(); 
     $('#AddBrandForm').fadeOut(); 
    }) 
     .done(function(data) { 
      //console.log(data); 
      $('#AddBrandForm').fadeOut(); 
      $('#AddBrandSuccess').fadeIn(); 
      setTimeout(function(){ location.reload(); }, 2000); 

    }); 
    // TODO 
}); 

// 3rd AJAX script , DOESN'T WORK 

$('#DeleteModal').on('submit', function(e) { 
    // Stop the browser from submitting the form. 
    var target = $(this); 
    var postData = $(this).serializeArray(); 
    var Actionurl = $(this).attr('action'); 
    var category_name = postData[1]['value']; 

    e.preventDefault(); 
    $.post(Actionurl, postData) 
    .fail(function(data) { 
     //$('#'+ category_name +'ConfirmDelete').removeClass("disabled"); 
     //$('#'+ category_name +'PostAlertError').fadeIn('fast'); 
    }) 

    .done(function(data) { 
     //$('#'+ category_name +'ConfirmDelete').addClass("disabled"); 
     //$('#'+ category_name +'PostAlertSuccess').fadeIn('fast'); 
     alert("Fatto!"); 
    }); 

    $('.closeModal').click(function(e) { 
     $('#'+ category_name +'ConfirmDelete').removeClass("disabled"); 
     $('.postAlert').hide(); 
     location.reload(); 
    }); 
    // TODO 
}); 

// 4th AJAX script, DOESN'T WORK - same as previous 

$('#EditCategoryForm').on('submit', function(e) { 
    // Stop the browser from submitting the form. 
    e.preventDefault(); 
    var postData = $(this).serializeArray(); 
    var Actionurl = $(this).attr('action'); 
    var category_name = postData[1]['value']; 
    $.post(Actionurl, postData) 
    .fail(function(data) { 
     $('#'+ category_name +'EditCategoryError').fadeIn(); 
     $('#EditCategoryForm').fadeOut(); 
     $('#'+ category_name +'ConfirmCategoryEdit').addClass("disabled"); 

    }) 
     .done(function(data) { 
      console.log(data); 
      $('#EditCategoryForm').fadeOut(); 
      $('#'+ category_name +'EditCategorySuccess').fadeIn(); 
      $('#'+ category_name +'ConfirmCategoryEdit').addClass("disabled"); 

    }); 

    // Reset Modals and Cards 
    $('#'+ category_name +'CloseEditCategoryModal').click(function(e) { 
     $('#'+ category_name +'ConfirmCategoryEdit').removeClass("disabled"); 
     $('.postAlert').hide(); 
     setTimeout(function(){ location.reload(); }, 2000); 
    }); 
    // TODO 
}); 

댓글이 모든 것을 말해, 내가 어떻게했는지 모른다 네가 틀렸어. 그리고 그걸 알아 내려고 꽤 오래 동안 지냈어. 네가 나를 도울 수 있기를 바란다.

편집 : 요청에 따라 HTML, 긴 비트 :

<div class="container"> 
<div id="addACategoryBlock"> 
<div class="row"> 
    <div class="col-lg-12"><h4>Add a new category to the site</h4></div> 
</div> 
<div class="row"> 
    <div class="col-lg-12"> 
    <div class="row"> 
    <div class="col-lg-12"> 
     <div id="AddCategorySuccess" class="alert alert-success alert-dismissible postAlert"> 
     <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> 
     <h4><i class="icon fa fa-check"></i> Category Added successfully!</h4> 
     </div> 
     <div id="AddCategoryError" class="alert alert-warning alert-dismissible postAlert"> 
     <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> 
     <h4><i class="icon fa fa-warning"></i> There's been an error</h4> 
     </div> 
    </div> 
    </div> 
    <form id="AddCategoryForm" method="POST" action="{{ path_for('auth.categories.add') }}"> 
       <div class="form-group"> 
        <div class="col-lg-6"> 
        <input name ="category_name" class="form-control" id="category_name" placeholder="Name" type="text" required> 
        <input name="slug" class="form-control" id="slug" placeholder="Slug" type="text" required> 
        </div> 
       </div> 
       <div class="form-group"> 
        <div class="col-lg-6"> 
        <label>Select a brand to connect it with this new category</label> 
        <select multiple="multiple" class="form-control" name="brands[]" size="{{ countNum }}"> 
         {% for brand in brands %} 
         <option value="{{ brand.brand_id }}">{{ brand.brand_name|capitalize }}</option> 
         {% endfor %} 
        </select> 
        </div> 
       </div> 

       <div class="form-group"> 
        <div class="col-lg-6 text-center"> 
        <button type="submit" class="btn btn-primary">Add category</button> 
        </div> 
        <div class="col-lg-6 text-center"> 
        <button id="CloseAddCategory" type="button" class="btn btn-primary">Close</button> 
        {{ csrf.field | raw }} 
        </div> 
       </div> 
      </form> 
    </div> 
    </div> 
    </div> 



    <div class="row"> 
    <div class="col-lg-12"> 
    <h1>Categories</h1> 
    <div class="box"> 
      <div class="box-header with-border"> 
       <h3 class="box-title">Categories in the site</h3> 
       <small class="pull-right">or <a id="AddCategoryLinkToggle" href="#">add a new category</a></small> 
      </div> 

      <!-- /.box-header --> 
      <div class="box-body"> 
       <table class="table table-bordered table-striped text-center"> 
       <tbody><tr> 
        <th>#</th> 
        <th>Name</th> 
        <th>Slug</th> 
        <th>Brands inside this category</th> 
        <th>Action</th> 
       </tr> 
       {% for category in categories %} 
       <!-- Modal --> 
       <div class="modal fade" id="{{ category.slug }}Delete" tabindex="-1" role="dialog" aria-labelledby="{{ category.slug }}DeleteLabel"> 
        <div class="modal-dialog" role="document"> 
        <div class="modal-content"> 
         <div class="modal-header"> 
         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
         <h4 class="modal-title" id="{{ category.slug }}DeleteLabel">Delete {{ category.category_name|capitalize }}</h4> 
         </div> 
         <div class="modal-body"> 
         <h2>Are you sure you want to delete {{ category.category_name|capitalize }} ?</h2> 
         <h4>This action is permanent.</h4> 
         <div id="{{ category.category_name|lower }}PostAlertSuccess" class="alert alert-success alert-dismissible postAlert"> 
          <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> 
          <h4><i class="icon fa fa-check"></i> Record deleted successfully!</h4> 
         </div> 
         <div id="{{ category.category_name|lower }}PostAlertError" class="alert alert-warning alert-dismissible postAlert"> 
         <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> 
          <h4><i class="icon fa fa-warning"></i> Alert!</h4> 
          Warning alert preview. This alert is dismissable. 
         </div> 

         </div> 
         <div class="modal-footer"> 
         <form id="DeleteModal" class="DeleteModal" method="POST" action="{{ path_for('auth.categories.delete') }}"> 
         <input name="category_id" type="hidden" value="{{ category.category_id }}"> 
         <input class="category_name" name="category_name" type="hidden" value="{{ category.category_name|lower }}"> 
         <button type="button" class="btn btn-default closeModal" data-dismiss="modal">Close</button> 
         <button id="{{ category.category_name|lower }}ConfirmDelete" name="confirmDelete" type="submit" class="btn btn-primary confirmDelete">Confirm</button> 
         {{ csrf.field | raw }} 
         </form> 
         </div> 
        </div> 
        </div> 
       </div> 
        <div class="modal fade" id="{{ category.slug }}Edit" tabindex="-1" role="dialog" aria-labelledby="{{ category.slug }}EditLabel"> 
        <div class="modal-dialog" role="document"> 
         <div class="modal-content"> 
         <div class="modal-header"> 
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
          <h4 class="modal-title" id="{{ category.slug }}EditLabel">Edit {{ category.category_name|capitalize }}</h4> 
         </div> 
         <form id="EditCategoryForm" method="POST" action="{{ path_for('auth.categories.edit') }}"> 
          <div class="modal-body"> 
          <div id="{{ category.category_name|lower }}EditCategorySuccess" class="alert alert-success alert-dismissible postAlert"> 
          <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> 
          <h4><i class="icon fa fa-check"></i> Record updated successfully!</h4> 
         </div> 
         <div id="{{ category.category_name|lower }}EditCategoryError" class="alert alert-warning alert-dismissible postAlert"> 
         <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> 
          <h4><i class="icon fa fa-warning"></i> Alert!</h4> 
          There's been an error! 
         </div> 
          <div class="form-group"> 
          <label for="EditName">Name</label> 
          <input type="text" class="form-control" name="EditName" id="EditName" placeholder="Name" value="{{ category.category_name|capitalize }}"> 
          <label for="EditSlug">Slug</label> 
          <input type="text" class="form-control" name="EditSlug" id="EditSLug" placeholder="Slug" value="{{ category.slug }}"> 
          </div> 
          <div class="form-group"> 
          <label>Edits brands connected with this category</label> 
          <select multiple="multiple" class="form-control" name="brands[]" size="{{ countNum }}"> 
          {% for brand in brands %} 
           {% if brand.brand_id in correlated %} 
           <option selected="selected" value="{{ brand.brand_id }}">{{ brand.brand_name|capitalize }}</option> 
           {% else %} 
           <option value="{{ brand.brand_id }}">{{ brand.brand_name|capitalize }}</option> 
           {% endif %} 

          {% endfor %} 
          </select> 
          <input type="hidden" class="form-control" name="category_id" id="category_id" value="{{ category.category_id }}"> 
          </div> 
          </div> 
          <div class="modal-footer"> 
          <button id="{{ category.category_name }}CloseEditCategoryModal" type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
          <button id="{{ category.category_name }}ConfirmEditModal" type="submit" class="btn btn-primary">Save changes</button> 
          </div> 
          {{ csrf.field | raw }} 
         </form> 
         </div> 
        </div> 
        </div> 
       <!-- end modal --> 
       <tr> 
        <td>{{ category.category_id }}</td> 
        <td>{{ category.category_name|capitalize }}</td> 
        <td>{{ category.slug }}</td> 
        <td> 
        <ul> 
         {% for brand in category.brands %} 
         <li>{{ brand.brand_name }}</li> 
         {% endfor %} 
        </ul> 
        </td> 
        <td> 
        <div class="btn-group"> 
         <button type="button" class="btn btn-block btn-primary" data-toggle="modal" data-target="#{{ category.slug }}Delete">Delete</button> 
         <button type="button" class="btn btn-block btn-primary" data-toggle="modal" data-target="#{{ category.slug }}Edit">Edit</button> 
         <!--<a href="{{ path_for('auth.categories') }}/edit/{{ category.category_id }}" target="_blank">Prova edit</a>--> 
        </div> 
        </td> 
       </tr> 
       {% endfor %} 

       </tbody></table> 
      </div> 
      <!-- /.box-body --> 
      <div class="box-footer clearfix"> 
       <!--<ul class="pagination pagination-sm no-margin pull-right"> 
       <li><a href="#">«</a></li> 
       <li><a href="#">1</a></li> 
       <li><a href="#">2</a></li> 
       <li><a href="#">3</a></li> 
       <li><a href="#">»</a></li> 
       </ul>--> 

      </div> 
      </div> 
      </div> 
</div> 
</div> 

Answer 1

가 return false보십시오 :

$('#DeleteModal').on('submit', function (e) { 
    // ... 
    return false; 
}); 

$('#EditCategoryForm').on('submit', function (e) { 
    // ... 
    return false; 
});