Question

我有2个文件testjquery.php和abcd.php 在表单上提交调用ajax调用并使用ajax方法提交它。第一次它使用event.preventdefault阻止表单默认，并将响应数据从另一页加载到div中。但是，当我再次尝试提交它时，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>

Answer 1

该行

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

使用ajax请求中的新html代码替换div id =“abc”的所有内容。

此新内容未附加任何事件处理程序，并且表单以“正常”方式提交。要解决此问题，您必须添加新的

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

中的

function ajax_update_mini_cart(data) {}

后

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

这将添加处理程序，每次都会通过ajax提交表单。

Answer 2

你应该委托事件，例如：

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

请参阅@my question关于FORM提交的评论

使用event.preventdefault（）不会阻止ajax返回表单

2 个答案: