$(). 아약스 이벤트 문제

많은 텍스트 상자가있는 페이지가 있습니다. 각 텍스트 상자에는 구분 된 ID와 제출 버튼이 있습니다. 사용자가 텍스트 상자를 변경하고 제출 버튼을 클릭하면 해당 텍스트 상자를 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>

당신이 나를 도울 수 .. 어디에 문제가!?

출처

2011-01-27 cxForce

제출 단추를 클릭 할 때마다 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 
    } 
});

를?

출처

2011-01-27 17:20:34

$(). 아약스 이벤트 문제

답변

관련 문제