ajax返回表單不會阻止使用event.preventdefault（）

我有2個文件testjquery.php和abcd.php 在表單上提交調用ajax調用並使用ajax方法提交。第一次，它會阻止使用event.preventdefault的形式defaultevent，並將來自其他頁面的響應數據加載到div中。但是，當我再次嘗試提交它時，event.preventdefault在表單上不起作用。請幫忙。提前致謝。ajax返回表單不會阻止使用event.preventdefault（）

// testjquery.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Untitled Document</title> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 

    </head> 

    <body> 


    <div id="abc"> 
     <form action="abcd.php" method="post" accept-charset="utf-8" name="cartform"> 
     <table cellpadding="6" cellspacing="1" style="width:100%" border="0"> 
      <tr> 
      <th>QTY</th> 
      <th>Item Description</th> 
      <th style="text-align:right">Item Price</th> 
      <th style="text-align:right">Sub-Total</th> 
      </tr> 
      <input type="hidden" name="cartrowid[1]" value="d68b70f3503216b22484eef9c786124a" /> 
      <tr> 
      <td><input type="text" name="cartrowqty[1]" value="1" maxlength="3" size="5" /></td> 
      <td> micromax_A12112 
       <p> <strong>Size:</strong> L<br /> 
       <strong>Color:</strong> Red<br /> 
       </p></td> 
      <td style="text-align:right">123.00</td> 
      <td style="text-align:right">$123.00</td> 
      </tr> 
      <input type="hidden" name="cartrowid[2]" value="e376db925db6430cf3e82c3854b4f5e2" /> 
      <tr> 
      <td><input type="text" name="cartrowqty[2]" value="1" maxlength="3" size="5" /></td> 
      <td> Indian_Saree 
       <p> <strong>Size:</strong> L<br /> 
       <strong>Color:</strong> Red<br /> 
       </p></td> 
      <td style="text-align:right">2,555.00</td> 
      <td style="text-align:right">$2,555.00</td> 
      </tr> 

     </table> 
     <p> 
      <input type="submit" name="add_item_via_ajax_form" value="Update your Cart" class="add_item_via_ajax_form" /> 
     </p> 
     </form> 
     <a href="http://w3schools.com/">Go to W3Schools.com</a> 
    <p>The preventDefault() method will prevent the link above from following the URL.</p> 
    </div> 
    </body> 
    </html> 
    <script> 
    $(function() 
    { 


     // Example of adding a item to the cart via a link. 
     $('.add_item_via_ajax_form').click(function(event) 
     { 
      alert(1); 
      event.preventDefault(); 

      // Get the parent form. 
      var parent_form = $(this).closest('form'); 

      // Get the url the ajax form data to be submitted to. 
      var submit_url = parent_form.attr('action'); 

      // Get the form data. 
      var $form_inputs = parent_form.find(':input'); 
      var form_data = {}; 
      $form_inputs.each(function() 
      { 
       form_data[this.name] = $(this).val(); 
      }); 

      $.ajax(
      { 
       url: submit_url, 
       type: 'POST', 
       data: form_data, 
       success:function(data) 
       { 
        //alert(data); 
         event.preventDefault(); 
        ajax_update_mini_cart(data); 
       } 
      }); 
     }); 

     // A function to display updated ajax cart data from the mini cart menu. 
     function ajax_update_mini_cart(data) 
     { 


      $('#abc').html(data); 

      $('#mini_cart_status').show(); 

      // Set the new height of the menu for animation purposes. 
      var min_cart_height = $('#mini_cart ul:first').height(); 
      $('#mini_cart').attr('data-menu-height', min_cart_height); 
      $('#mini_cart').attr('class', 'js_nav_dropmenu'); 

      // Scroll to the top of the page. 
      $('body').animate({'scrollTop':0}, 250, function() 
      { 
       // Notify the user that the cart has been updated by showing the mini cart. 
       $('#mini_cart ul:first').stop().animate({'height':min_cart_height}, 400).delay(3000).animate({'height':'0'}, 400, function() 
       { 
        $('#mini_cart_status').hide(); 
       }); 
      }); 
     } 
    }); 
    </script> 
    <script> 
    $(document).ready(function(){ 
     $("a").click(function(event){ 
     event.preventDefault(); 
     }); 
    }); 
    </script> 


//abcd.php 

<form action="abcd.php" method="post" accept-charset="utf-8" name="cartform"> 
    <table cellpadding="6" cellspacing="1" style="width:100%" border="0"> 
     <tr> 
     <th>QTY</th> 
     <th>Item Description</th> 
     <th style="text-align:right">Item Price</th> 
     <th style="text-align:right">Sub-Total</th> 
     </tr> 
     <input type="hidden" name="cartrowid[1]" value="d68b70f3503216b22484eef9c786124a" /> 
     <tr> 
     <td><input type="text" name="cartrowqty[1]" value="1" maxlength="3" size="5" /></td> 
     <td> micromax_A12112 
      <p> <strong>Size:</strong> L<br /> 
      <strong>Color:</strong> Red<br /> 
      </p></td> 
     <td style="text-align:right">123.00</td> 
     <td style="text-align:right">$123.00</td> 
     </tr> 
     <input type="hidden" name="cartrowid[2]" value="e376db925db6430cf3e82c3854b4f5e2" /> 
     <tr> 
     <td><input type="text" name="cartrowqty[2]" value="1" maxlength="3" size="5" /></td> 
     <td> Indian_Saree 
      <p> <strong>Size:</strong> L<br /> 
      <strong>Color:</strong> Red<br /> 
      </p></td> 
     <td style="text-align:right">2,555.00</td> 
     <td style="text-align:right">$2,555.00</td> 
     </tr> 

    </table> 
    <p> 
     <input type="submit" name="add_item_via_ajax_form" value="Update your Cart" class="add_item_via_ajax_form" /> 
    </p> 
    </form> 
    <a href="http://w3schools.com/">Go to W3Schools.com</a> 
<p>The preventDefault() method will prevent the link above from following the URL.</p>

來源

2014-11-03 vithal04

你點擊AJAX加載的內容？ – Naruto 2014-11-03 14:00:34

是的，我再次點擊阿賈克斯加載的內容 – vithal04 2014-11-03 14:05:03

你可以有更好的防止默認提交的FORM，如果用戶按FORM內的「返回」會發生什麼？它應該提交FORM嗎？ – 2014-11-03 14:07:51

您應該委託事件，e.g：

$('#abc').on('click', '.add_item_via_ajax_form', function(event){ 
    //... 
});

看到有關FORM @my問題的評論，而不是提交

來源

2014-11-03 14:05:13

我試過這個，但它沒有爲我工作。 – vithal04 2014-11-03 14:19:56

對不起，在我的例子中，忘記了通過'event'，也許你在Firefox上看到問題，然後 – 2014-11-03 14:38:05

謝謝你。您的解決方案也解決了問題。簡單而緊湊。 – vithal04 2014-11-04 07:21:48

線

$('#abc').html(data);

替換DIV ID = 「ABC」與來自AJAX請求新的HTML代碼的所有的內容。

此新內容沒有附加任何事件處理程序，並且表單以「正常」方式提交。爲了解決這個問題，你必須在你的

function ajax_update_mini_cart(data) {}

後

$('#abc').html(data);

此添加一個新的

$('.add_item_via_ajax_form').click(function(event) {}

將添加處理程序和形式將通過AJAX每次提交。

來源

2014-11-03 14:02:20 pensan

問題解決您的答案。非常感謝。 – vithal04 2014-11-03 14:19:24

ajax返回表單不會阻止使用event.preventdefault（）

回答

相關問題