Question

我有一个带有表单的页面。在document.ready循环中使用jquery.load以动态方式加载表单。

$('#storico').load('bp/storico.php?az=<?php echo $id; ?>');

然后我创建了一个委托事件来处理表单提交：

$(document).on('click','#update',function(e){
e.preventDefault();
var att_stor = $('#attivo_storico').val();
var pass_stor = $('#passivo_storico').val();
var az = <?php echo $id; ?>;
$.ajax({
        type: "POST",
        url: "bp/storico1.php",
        data: {attivo_storico: att_stor, passivo_storico: pass_stor, azione: az},
        success: function(data){
    data1=data.split("|");
    if(data1[0].trim() == "Successo"){ 
        $("#storico").empty().html('<center><p class="success">'+data1[1]+'</p></center>').animate({opacity:1}, 'slow');
    }else if(data1[0].trim() == "Errore"){
        $("#storico").empty().html('<center><p class="err">'+data1[1]+'</p></center>').animate({opacity:1}, 'slow');    
    }
    },
        complete: setTimeout(function(){$('.container').load('bp/businessplan.php?id=<?php echo $id; ?>');},3000)
    });
});

ajax调用就像魅力一样，并执行以下操作：

提交表单并更新db（无问题）;
使用确认消息（无问题）更新包含表单的div
重新加载容器div以使用新数据更新整个页面（在页面的其他位置使用）

第一个循环完美无缺。第二次执行两次调用，第三次是四次，然后是八次。如果我在容器中加载其他东西，然后返回到此页面，则从一个开始执行。这个问题不会影响脚本的工作方式，但我想了解它为什么会重复调用（就像Firebug给我看的那样）

提前致谢！

Answer 1

尝试使用：

$(document).off().on('click','#update',function(e){
e.preventDefault();
var att_stor = $('#attivo_storico').val();
var pass_stor = $('#passivo_storico').val();
var az = <?php echo $id; ?>;
$.ajax({
        type: "POST",
        url: "bp/storico1.php",
        data: {attivo_storico: att_stor, passivo_storico: pass_stor, azione: az},
        success: function(data){
    data1=data.split("|");
    if(data1[0].trim() == "Successo"){ 
        $("#storico").empty().html('<center><p class="success">'+data1[1]+'</p></center>').animate({opacity:1}, 'slow');
    }else if(data1[0].trim() == "Errore"){
        $("#storico").empty().html('<center><p class="err">'+data1[1]+'</p></center>').animate({opacity:1}, 'slow');    
    }
    },
        complete: setTimeout(function(){$('.container').load('bp/businessplan.php?id=<?php echo $id; ?>');},3000)
    });
});

Answer 2

$(document).off('click','#update'); // off old click events
$(document).on('click','#update',function(e){
e.preventDefault();
var att_stor = $('#attivo_storico').val();
var pass_stor = $('#passivo_storico').val();
var az = <?php echo $id; ?>;
if(request && request.readystate != 4){
    request.abort();  // for abort last one
}
request = $.ajax({
        type: "POST",
        url: "bp/storico1.php",
        data: {attivo_storico: att_stor, passivo_storico: pass_stor, azione: az},
        success: function(data){
    data1=data.split("|");
    if(data1[0].trim() == "Successo"){ 
        $("#storico").empty().html('<center><p class="success">'+data1[1]+'</p></center>').animate({opacity:1}, 'slow');
    }else if(data1[0].trim() == "Errore"){
        $("#storico").empty().html('<center><p class="err">'+data1[1]+'</p></center>').animate({opacity:1}, 'slow');    
    }
    },
        complete: setTimeout(function(){$('.container').load('bp/businessplan.php?id=<?php echo $id; ?>');},3000)
    });
});

Ajax调用每次都重复

2 个答案: