.loadと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()の表示をロードするだけですか？