javascript - 使用 event.preventdefault() 不会阻止 ajax 返回的表单-6ren

javascript - 使用 event.preventdefault() 不会阻止 ajax 返回的表单

转载作者：行者123 更新时间：2023-11-28 19:31:18

我有2个文件testjquery.php和abcd.php在表单提交上调用ajax调用并使用ajax方法提交它。第一次它使用 event.preventdefault 阻止表单 defaultevent 并将响应数据从其他页面加载到 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>

最佳答案

线路

$('#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 提交表单。

关于javascript - 使用 event.preventdefault() 不会阻止 ajax 返回的表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26715791/

文章推荐： ios - TableViewCell 中的 Swift 3 UISwitch 在滚动时丢失状态

javascript - event.clientX 和 event.clientY 与 event.x 和 event.y
当检测鼠标x和y坐标时，最好像这样使用event.clientX和event.clientY: function show_coords(event){ var x=event.clientX;
javascript - Event.target、Event.toElement 和 Event.srcElement 之间有什么区别？
我有以下代码: document.oncontextmenu = function(evt) { evt = evt || window.event; console.log(evt.
events - 我需要一个类比 : Triggers and Events
对于另一个问题，我遇到了一个似乎偶尔出现在 SO 的误解。一些提问者似乎认为触发器之于数据库就像事件之于 OOP 一样。有没有人有一个很好的类比来解释为什么这是一个有缺陷的比较，以及误用它的后果？
events - 如何获取删除键的 event.keyCode？
$('body').keypress(function(event){ if(event.keyCode == 46){console.log('Delete Key Pressed')};
events - 事件上的奇怪行为(Html.Events.on)
我正在制作一个“流体”文本区域，它根据内容调整其高度。我实际上正在尝试实现 this脚本。我有以下代码:https://ellie-app.com/Vjtvm6yrKWa1/4 问题是，当增加高度时，
events - 拉斐尔JS : how to remove events?
我使用 Raphael .mouseover() 和 .mouseout() 事件来突出显示 SVG 中的某些元素。这工作正常，但在我单击一个元素后，我希望它停止突出显示。在 Raphael doc
events - 重复 "Events"(日历)
我目前正在开发一个应用程序，允许人们为在线广播电台安排“节目”。我希望用户能够设置重复事件，例如:- “躁狂星期一”节目 - 每周一 9 点至 11 点“月中疯狂” - 每个月的第二个星期四“本月新
mysql - SQL硬查询: events between other events
我有以下三个表格(简化版本): 已加载关卡: id(整数、主键、自动增量) globalId(整数，键) 日期(日期时间、键) serverId(Int，键) gamemodeId(Int，Key)
python gevent.event.Event
在我阅读 Gevent Tutorial 之后，我有一个关于 gevent.event.Event 的问题。 Event.set() 是否会唤醒所有被 Event.wait() 阻塞的函数？就像下面
php - UsersController::beforeFilter() 的声明应该与 AppController::beforeFilter(Cake\Event\Event $event) 兼容
我对 cakephp ver3.1.3 没有经验我按照说明实现了登录认证功能； http://book.cakephp.org/3.0/en/tutorials-and-examples/blog-
android - "CleverTap"Can 't see "Event Property"filter in Filter by event property in some events
现在，我发送 10 个事件，每个事件有 1 个属性。但是当我想过滤特定事件并按属性选择事件时，在“事件属性”过滤器中仅显示前 7 个事件，而我为其余事件添加的事件仅显示“第一次”过滤器，为什么？最佳
asp.net - FireFox 和 javascript 问题(event.keyCode 或 event.charCode 或 event.which 不起作用)
我不知道我的 Firefox 发生了什么! 我的aspx和javascript代码是这样的: function a() { alert(
clojure - Re-frame 中的 reg-event-db、reg-event-fx 和 reg-event-ctx 有什么区别？
中有3个事件fns重装，我可以对两者做同样的事情 reg-event-db和 reg-event-fx . reg-event-db之间的主要区别是什么, reg-event-fx和 reg-eve
javascript - event.keycode 与 event.which
我遇到了 Firefox keydown 行为，因为在没有聚焦于特定字段的情况下按下 Enter 键(实际上是任何键)不会触发 keydown 事件只会触发`按键事件。这可能会非常令人困惑，因为 k
events - 如何在 UML 类图中表示 "event"？
这是我的代码片段 public class Notation : INotifyPropertyChanged { public event PropertyChangedEventHandl
events - 多个 tags
我可以在一个 Jsf2 xhtml 文件中有多个标签吗？在那种情况下，关联的监听器将以什么顺序被调用？ Mojarra 2.1.1/Apache Tomcat 7.0.22/PrimeFaces 3
events - 多个 tags
我可以在一个 Jsf2 xhtml 文件中有多个标签吗？在那种情况下，关联的监听器将以什么顺序被调用？ Mojarra 2.1.1/Apache Tomcat 7.0.22/PrimeFaces 3
events - jQuery event.stopPropagation 不适用于
我有以下 JavaScript: $('#ge-display').click(function (event) { window.open('/googleearth/ge-display.ph
events - 我可以将哪些属性与 event.target 一起使用？
我需要确定触发事件的元素。使用 event.target 获取相应的元素。我可以从那里使用哪些属性？引用编号节点名我找不到关于它的大量信息，即使在 jQuery 上也是如此页，所以希望有人
Faster version of 'pygame.event.get()'. Why are events being missed and why are the events delayed?(更快版本的‘pygame.vent.get()’。为什么错过了比赛，为什么比赛被推迟了？)
我在pyGame中创建了一个Asteroidz克隆，并在pygame.vent.get()循环中有两个for Event，一个用于检查退出请求，以及游戏是否应该通过按空格键开始，然后在游戏中进一步尝试

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 使用 event.preventdefault() 不会阻止 ajax 返回的表单