Question

I have a button which when clicked the first time it will load another html page.
When it is clicked the second time it will empty a div of the loaded page.

However, for some reason the loaded content keeps reappearing after the second click….

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

What’s going on?

Answer 1

You test $(#load) but toggle $("boatdiv").

Try :

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