div에서 외부 페이지로드 및 언로드

Question

이 jQuery 함수를 사용하여 클릭하면 div 내에서 외부 페이지를로드합니다.

$(document).on("click", ".more", function() { 
 
$("#wait").load("www.google.com") 
 
}), 
 
$(document).on("click",".more",function(){ 
 
$("#wait").empty() 
 
})

#wait{ 
 
    width:80vw; 
 
    height:80vh; 
 
    position:fixed; 
 
    top:30px; 
 
    left:30px; 
 
    background:red; 
 
} 
 

 
#more{cursor:pointer}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="more">CLICK</div> 
 
<div id="wait"></div>

그것은 작동하지만 내가 보여 클릭하면 다시는 비어있을 것입니다 div에

.
.empty()의 대안은 무엇입니까?

감사합니다.

Answer 1

게시물에서 한 번로드 한 다음 토글하려는 것으로 보입니다.

$(document).on("click", ".moreorless", function() { 
    if ($(this)hasClass("more")) { 
    $("#wait").load("about.html"); 
    $(this).toggleClass("more less"); 
    } 
    else { 
    $("#wait").empty(); 
    $(this).toggleClass("less more"); 
    } 
}); 

Answer 2

왜 : 동일한 버튼을 이미

$(document).on("click", ".more", function() { 
    $("#wait").load("about.html"); 
    $(this).toggleClass("more less"); 
}); 
$(document).on("click",".less",function(){ 
    $("#wait").empty(); 
    $(this).toggleClass("less more"); 
}); 

하나의 이벤트 핸들러를 시도별로 어떤 것으로 보이는이 시도 클릭 추가하고 각 시간을 삭제하려면

$(document).on("click", ".more", function() { 
    var $wait = $("#wait"); 
    if ($wait.html().length==0) $wait.load("about.html"); 
    $wait.show(); 
    $(this).toggleClass("more less"); 
}); 
$(document).on("click",".less",function(){ 
    $("#wait").hide(); 
    $(this).toggleClass("less more"); 
}); 

페이지로드시 데이터를로드 한 다음 버튼을 클릭하면 toggle() 디스플레이가로드됩니까?

$(function(){ 
    // add the content right when page loads 
    $("#wait").load("about.html"); 
    $('#more').click(function(){ 
     // toggle display 
     $("#wait").toggle(); 
     // toggle class 
     $(this).toggleClass("less more"); 
    }); 
});