.load и .unload внешняя страница внутри 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>

Это работает, но если я нажимаю, чтобы показать, что Див снова будет пустым.
Какая альтернатива .empty()?

Спасибо.

Answer 1

С вашего поста, кажется, вы хотите загрузить его один раз, а затем просто переключать.

$(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"); 
}); 

Для добавления и удаления каждый раз, когда вы нажимаете на кнопку SAME попробовать это, который, кажется, очень много того, что вы уже пробовали

$(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", ".moreorless", function() { 
    if ($(this)hasClass("more")) { 
    $("#wait").load("about.html"); 
    $(this).toggleClass("more less"); 
    } 
    else { 
    $("#wait").empty(); 
    $(this).toggleClass("less more"); 
    } 
}); 

Answer 2

Почему не просто загрузите данные на загрузку страницы, а затем нажмите 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"); 
    }); 
});