php ajax jquery-提交时只工作一次

我有一个表单，可以将购物车信息提交给处理程序文件，这非常有效。我现在尝试结合ajax和jquery，以提供更好的用户体验

我的问题是，代码只在第一次提交时起作用

以下是我的js代码：

$(function(){
    $('form.addtoCart').on('submit', function() {
        var that = $(this),
            url = '/ajax/handlerCart.php',
            type = that.attr('method'),
            data = {};

        that.find('[name]').each(function(index, value) {
            var that = $(this),
                name = that.attr('name'),
                value = that.val();

            data[name] = value; 
        });

        $.ajax({
            url: url,
            type: type,
            data: data,
            success: function(response) {
                console.log(response);
                $('#nav_cart').load('/ajax/nav_cart.php');
            }
        });
        return false;
    });
});

这是我的html：

<form action="" method="post" class="addtoCart">
    <input type="hidden" name="ID" value="1">
    <input type="hidden" name="Price" value="5">
    <input type="submit" value="Add" name="Add">
</form>

这个问题仍然存在

4） 我已尝试让处理程序返回echo time（）。我想可能是浏览器阻止了重复的javascript响应，但这不起作用

我已经尽了最大努力研究这个问题，但我找不到解决方案，或者我不理解人们提供给其他人的解决方案。我提前道歉，我对jquery/ajax还是相当陌生的

谢谢你抽出时间

编辑：

---

我的表单位于index.php中。一旦ajax成功，nav#u cart.php将加载到div#nav#u cart（也在index.php中）。如果不清楚，很抱歉。

您是否尝试添加preventDefault（）方法来阻止默认提交

 $(function(){
    $('form.addtoCart').on('submit', function(e) { //addede e here to get the event object
        e.preventDefault(); // preventing the default submit
        var that = $(this),
            url = '/ajax/handlerCart.php',
            type = that.attr('method'),
            data = {};

        that.find('[name]').each(function(index, value) {
            var that = $(this),
                name = that.attr('name'),
                value = that.val();

            data[name] = value; 
        });

        $.ajax({
            url: url,
            type: type,
            data: data,
            success: function(response) {
                console.log(response);
                $('#nav_cart').load('/ajax/nav_cart.php');
            }
        });
        return false;
    });
});

---

将此添加到/ajax/nav_cart.php中，而不是在HTML中引用它，jQuery代码正在运行，正如您在控制台中看到的那样。它注册响应。只有那个响应是空的。问题一定在于您的

/ajax/handlerCart.php

以及它如何响应请求。

这里您需要使用jQuery实现事件委派。因为加载页面后，将创建DOM并将事件分配给表单

但在发出ajax请求之后，您将根据ajax响应替换HTML。您也正在替换表单元素

虽然它是相同的标记，但从DOM的角度来看，它是一个新元素，事件被分配给具有相同标记的旧元素

您应该将事件绑定到某个未被AJAX调用替换的父元素，如下所示：

$('#parent_element').on('submit', '.addtoCart', function(event){
  // Your code here
});

---

更多信息：

不要使用提交和表单，您可以通过一个简单的按钮在html中直接替换它：

<input type="button" value="Add" name="Add" class="mybutton">

---

您把jquery代码放在哪里了？在html正文的结尾之前，我引用了jquery代码所在的文件。检查网络选项卡，查看第二次提交时发送的数据。尝试将此代码放在

nav_cart.php

too@ReneKorss在随后的提交中，我看到handlerCart.php post，nav_cart get…我想。我相信这是我应该期待的。对不起，我应该提到这一点。是的，I have.nav_cart.php是一个单独的功能，它只在表单提交并完成所有工作后显示更新的购物车的结果。因此，如果我提交表单，nav_cart.php可能会显示购物车中的项目总数。我不确定将jquery放在这个nav_cart.php中如何解决这个问题。您试过了吗？form.addtoCart在nav_cart.php中？jquery代码必须与nav cart一起加载evertime@brian8正在使用AJAX。所以页面不会被重新加载

nav_cart.php

只给出了一个响应。把JS放在那里完全没有必要。@ReneKorss，没错。它不会被重新加载，因此HTML页面中引用的jquery（$（'form.addtoCart'）的初始目标DOM元素将被

$（''nav_cart'）.load（'/ajax/nav_cart.php'）之后的新DOM替换我将此标记为正确，但问题在于处理程序handlerCart.php，而不是响应文件nav_cart.php.Sorry。修好了。我的意思是
/ajax/handlerCart.php
，因为这会给出响应，而不是
nav_cart.php
$('#parent_element').on('submit', '.addtoCart', function(event){
  // Your code here
});

<input type="button" value="Add" name="Add" class="mybutton">

 $(".mybutton").on("click",function(){

    $.ajax({
        url: url,
        type: type,
        data: data,
        success: function(response) {
            console.log(response);
            $('#nav_cart').load('/ajax/nav_cart.php');
        }
    });


  })