$（）。ajax events problem

Question

我有一个包含许多文本框的页面。每个文本框都有一个分隔的ID和提交按钮。当用户更改文本框并单击它的提交按钮时，我们用ajax更新该文本框。 （在这ajax进程按钮消失，文本框禁用..并加载gif出现。） 现在，问题是： 当用户更改第一个文本框，并单击它的提交按钮，所有的东西都工作完美！但是当用户点击第二个按钮时，两个按钮都消失了！如果你继续更新..所有的按钮消失，并出现！ 我的代码是：

<script type="text/javascript"> 
function iajax(obj) 
{(function($){ //jQuery GAURD 
    var p = obj.getAttribute('id',2); 
    var itemid = p.substring(6); // find btn id 
    var val = $("#txtTags"+itemid).val(); 

    $("#tagsup"+itemid).ajaxStart(function(){ 
     $("#tagsup"+itemid).hide(); 
     $("#msg"+itemid).empty().html("<img src='./images/admin_uploading.gif'/>"); 
     $("#txtTags"+itemid).attr("disabled","disabled"); 
    }); 

    $("#msg"+itemid).ajaxSuccess(function(){ 
     $(this).remove(":first").html("<span>Success..</span>").fadeOut(5000); // remove loading image 
    }); 

    $("#tagsup"+itemid).ajaxComplete(function(){ 
     $("#tagsup"+itemid).show(); // show submit btn  
     $("#txtTags"+itemid).removeAttr("disabled"); // Enable txt 
    }); 

    $.ajax({ 
     type: "post", 
     url: "proc.php", 
     data: "val="+ val, 
     async:false, 
     cache: false, 
     Error: function(){ $("#msg"+itemid).append("<span>Failed!</span>").fadeOut(5000); }  
    }); 
    return false; 
}) (jQuery); 
} 
</script> 

身体是这样的：

<div> 
    <input type="text" id="txtTags7332" width="200px" /> 
    <input type="button" onclick="iajax(this)" value="up" class="button" id="tagsup7332" /> 
    <div id="msg7332" style="float:left"></div>    
</div> 

你能帮助我..问题出在哪里！？

Answer 1

您有此行为，因为每次单击提交按钮时，都会向Ajax方法添加回调。

说明。通过这样做：

$("#tagsup"+itemid).ajaxStart(function(){ 
    $("#tagsup"+itemid).hide(); 
    $("#msg"+itemid).empty().html("<img src='./images/admin_uploading.gif'/>"); 
    $("#txtTags"+itemid).attr("disabled","disabled"); 
}); 

$("#msg"+itemid).ajaxSuccess(function(){ 
    $(this).remove(":first").html("<span>Success..</span>").fadeOut(5000); // remove loading image 
}); 

$("#tagsup"+itemid).ajaxComplete(function(){ 
    $("#tagsup"+itemid).show(); // show submit btn  
    $("#txtTags"+itemid).removeAttr("disabled"); // Enable txt 
}); 

每次进入函数时

，你的回调添加到成功，开始&完整的方法......所以，他们被称为每次你在这个函数输入时间。

例子：

• 你在与ID1，添加 回调的ID1。
• 你加入了ID2，你为ID2添加了回调。但ID1是 仍然存在。
• 你加入了ID2，为ID3添加了回调。但ID1 & ID2 仍然存在。
• 等等...

那么，为什么不直接做：

$.ajax({ 
    type: "post", 
    url: "proc.php", 
    data: "val=" + val, 
    async: false, 
    cache: false, 
    beforeSend: function(xhr, settings) 
    { 
     $("#tagsup"+itemid).hide(); 
     $("#msg"+itemid).empty().html("<img src='./images/admin_uploading.gif'/>"); 
     $("#txtTags"+itemid).attr("disabled","disabled"); 
    }, 
    success: function() 
    { 
     $(this).remove(":first").html("<span>Success..</span>").fadeOut(5000); // remove loading image 
    }, 
    error: function() 
    { 
     $("#msg"+itemid).append("<span>Failed!</span>").fadeOut(5000); 
    }, 
    complete: function() 
    { 
     $("#tagsup"+itemid).show(); // show submit btn  
     $("#txtTags"+itemid).removeAttr("disabled"); // Enable txt 
    } 
}); 

？