empty() 이후에 DOM 요소가 다시 나타납니다.

Question

처음으로 클릭 할 때 다른 HTML 페이지를로드하는 버튼이 있습니다. 두 번 클릭하면로드 된 페이지의 div가 비게됩니다.

그러나,로드 된 내용이 두 번째 클릭 후 다시 나타나지 유지 어떤 이유로 ....

CSS에 대한 :

#boatdiv { 
    width: 100%;  
} 

.clicked {} 

HTML

<button id="load"></button> 
<div id="boatdiv"></div> 

jQuery를

$(document).ready(function() { 
    $.ajaxSetup ({ 
     cache: false 
    }); 
    var loadURL = "AjaxLoad_injection.html"; 
    $("#load").on("click", function() { 
     if(!($(this).hasClass("clicked"))){ //checks if button has NOT been clicked 
     $("#boatdiv").html("<p>loading...</p>").load(loadURL); 
     } 
     else { 
     $("#boatdiv").empty(); 
     } 
     $("#boatdiv").toggleClass("clicked"); 
     } 
    ); 


}); // end ready 

무슨 일이야?

Answer 1

$(#load)을 테스트하지만 $("boatdiv")을 토글합니다.

보십시오 : 당신이 잘못 요소에 클래스를 전환하는

$("#load").on("click", function() { 
    if(!($(this).hasClass("clicked"))){ //checks if button has NOT been clicked 
     $("#boatdiv").html("<p>loading...</p>").load(loadURL); 
    } 
    else { 
     $("#boatdiv").empty(); 
    } 
    $(this).toggleClass("clicked"); 
}); 

Answer 2

. 클릭 한 요소를 토글하려고합니다. 마지막 게시물에서 내가 준 코드와 동일합니다. 그것을 통해 걸을 간단한

, 당신은 너무 아약스 호출이 비동기 기억 this

사용

$(this).togglClass('clicked') 

Answer 3

에 클래스를 toglle 할 필요가 ... this을 테스트하고 있습니다. ajax 호출이 반환되기 전에 두 번째 버튼을 클릭 할 수 있습니다.

는이 같은 아약스 통화 중에 버튼을 비활성화 할 수 있습니다 :

$('#load').on('click', function() { 
    if (!$(this).hasClass("clicked")) { 
     $('#load').attr('disabled', true); 
     $("#boatdiv").html("<p>loading...</p>").load(loadURL, function() { 
      $('#load').attr('disabled', false); 
     }); 
    } else { 
     $('#boatdiv').empty(); 
    } 
    //$('#boatdiv').toggleClass("clicked"); 
    $('#load').toggleClass("clicked"); 
}); 

버튼은 Ajax 호출하기 전에 사용할 수 없습니다. 콜백 함수는 두 번째 매개 변수로 "load()"함수에 전달됩니다. 아약스 호출이 반환 될 때 호출됩니다. 버튼을 다시 활성화합니다.

EDIT : 잘못된 요소가 클래스를 토글하는 것을 놓쳤다 고 생각했지만 여전히 아약스 호출 중에 버튼을 비활성화하고 싶거나 상황이 엉망이 될 수 있습니다.