php ajax jquery-在提交時只能使用一次

Question

我有一個將購物車信息提交到處理程序文件的表單，該文件運行良好。 我現在正在嘗試結合使用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>

我所做的事情：

1）我嘗試查看Chrome控制台，每次單擊后腳本似乎都能正常工作。 第一個響應顯示為“有效”，隨后我單擊了7次，如下圖所示。

鍍鉻控制台

2）我不認為這是事件委托問題，因為沒有新的后代添加到我的html中。

3）我認為load（）可能只工作一次，所以我也嘗試刪除了以下代碼行：

$('#nav_cart').load('/ajax/nav_cart.php');

問題仍然存在。

4）我試圖讓處理程序返回echo time（）。 我以為瀏覽器可能阻止了重復的javascript響應，但沒有用。

我已盡力研究此問題，但是我找不到解決方案，或者我只是不了解人們向他人提供的解決方案。 我事先表示歉意，我對jquery / ajax還是很陌生。

謝謝你的時間。

編輯：

我的表格位於index.php中。 一旦ajax成功，就將nav_cart.php加載到div＃nav_cart中（也在index.php中）。 抱歉，如果不清楚。

Answer 1

您是否嘗試添加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;
    });
});

Answer 2

$(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;
    });
});

在/ajax/nav_cart.php上添加它，而不是在HTML上引用它

Answer 3

從控制台可以看到，jQuery代碼正在運行。 它注冊響應。 只有該響應為空。 問題必須出在您的/ajax/handlerCart.php ，以及它如何響應請求。

Answer 4

在這里，您需要使用jQuery實現事件委托。 因為加載頁面后，將創建DOM並將事件分配給表單。

但是，在發出ajax請求之后，您將根據AJAX響應替換HTML。 您還將替換表單元素。

雖然它是相同的標記，但是從DOM的角度來看，它的新元素和事件被分配給具有相同標記的舊元素。

您應該將事件綁定到某個父元素，該父元素不會被您的AJAX調用替換，如下所示：

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

更多信息： http : //www.xpertdeveloper.com/2011/12/event-delegation-in-jquery/

Answer 5

不要使用Submit和form，您可以通過一個簡單的按鈕將其直接替換為html：

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

然后使用ajax：

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

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


  })