jQuery .attr 또는 .prop를 사용하여 속성 값이 작동하지 않음

Question

'loaded'라는 속성과 'no'라는 초기 값으로 버튼을 만들었습니다. 버튼을 클릭하면 몇 가지 아약스가 실행 중이며 마지막 단계에서 사용자가 버튼을 두 번 이상 클릭하면 아약스가 다시 실행되지 않도록 '로드 된'속성을 '예'로 설정하려고합니다. . http://jsfiddle.net/PDW35/2/

이 버튼을 클릭하는 것은 '예'로드 변경되지 않습니다

나는 이런 식으로 뭔가가있다. 이 같은 .attr 호출 후 경고 권리를 할 경우 그러나 :

alert($(this).attr('loaded')); 

경고 상자가 있기 때문에 사용자가 클릭하면, 같은 코드 위에두고 도움이되지 않는 '예'가 포함 않는다 화면에 '아니오'알림 상자가 있습니다.

.attr 대신 .prop를 사용하면 모두 동일한 방식으로 작동합니다. 여기에 포인트가 없거나 .prop 및 .attr이 맞춤 속성으로 작동하지 않습니까?

는 편집 : 아래의 의견에 따라 업데이트 jsfiddle 사용 아약스 : 사용자가 버튼을 클릭하면 http://jsfiddle.net/PDW35/5/

Answer 1

내가 원래의 코드가 작동하지 않는 이유는 정확히 모르겠습니다 만 $this은 어떤 이유로 원인으로 보인다

$(".preview-button").click(function(){ 

var id = $(this).attr('button_id'); 
var loaded = $(this).attr('loaded'); 
    if(loaded == "no"){   
     $(this).attr('loaded', 'yes'); 
    }else{ 
     alert("Data is loaded");  
    } 
}); 

여기 예를 들어 작업. 아래에서 시도해 보면 효과가있는 것 같습니다. Fiddle 여기에 있습니다.

나는 그것을 찾자 마자 그 이유를 대답으로 업데이트하려고 노력할 것이다.

var loaded = $(".preview-button").attr('data-loaded'); 
if (loaded === "no") { 
    $.ajax({ 
     success: function (result) { 
      $(".preview-button").attr('data-loaded', 'yes'); 
      alert($(".preview-button").attr('data-loaded')); 
     } 
    }); 
} else { 
    alert("data loaded"); 
} 

이 thread 참조하여 $this 나던 AJAX 호출 내부에서 제대로 작동하는 이유는 이유가 될 것으로 보인다.

Answer 2

질문을 읽고는 ..

그래서 아약스는 다시 실행되지 않도록보다 일단. 난 당신이 one() 필요하다고 생각

, 그것은 이벤트가 한 번만 실행할 수 있습니다 .. 당신의 click의 속성과 속성

예를

$(".preview-button").one('click',function(){ 
//your ajax stuff 
    alert('clicked!!!!'); 
}); 

Answer 3

당신은 속성을 설정할 수 있습니다

변화의 필요 없습니다 (또는 submit) 함수 :

$(".preview-button").click(function() { 
    this.ajaxCompleted = this.ajaxCompleted || false; 

    if (!this.ajaxCompleted) { 
     // run your request and set this.ajaxCompleted to true in a callback; 
    } 

    // do other stuff 
}); 

Answer 4

빚진 코드 : 일단 데이터가로드되면, 두 번 클릭하면 데이터가 이미로드되었음을 알립니다. http://jsfiddle.net/PDW35/4/