Load Html Content if not exist JQuery AJAX

I have a page with 3 buttons. >Logos >Ban开发者_如何学编程ners >Footer

When any of these 3 buttons clicked it does jquery post to a page which returns HTML content in response and I set innerhtml of a div from that returned content . I want to do this so that If I clicked Logo and than went to Banner and come back on Logo it should not request for content again as its already loaded when clicked 1st time.

Thanks .

---

Sounds like to be the perfect candidate for .one()

$(".someItem").one("click", function(){
  //do your post and load the html
});

Using one will allow for the event handler to trigger once per element.

---

In the logic of the click handler, look for the content having been loaded. One way would be to see if you can find a particular element that comes in with the content.

Another would be to set a data- attribute on the elements with the click handler and look for the value of that attribute.

For example:

$(".myElements").click(function() {
        if ($(this).attr("data-loaded") == false {
            // TODO: Do ajax load

            // Flag the elements so we don't load again
            $(".myElements").attr("data-loaded", true);
        }
    });

The benefit of storing the state in the data- attribute is that you don't have to use global variables and the data is stored within the DOM, rather than only in javascript. You can also use this to control script behavior with the HTML output by the server if you have a dynamic page.

---

try this:

HTML:

<a href="#" class="menu" data="logos" type="hidde-class">logos</a><br />
<a href="#" class="menu" data="banner" type="remover-class">banner</a><br />
<a href="#" class="menu" data="footer" type="remover-class">footer</a><br />

<div id="container"></div>

JS:

$(".menu").bind("click", function(event) {

    event.stopPropagation();

    var 
       data = $(this).attr("data");
       type = $(this).attr("type");

    if ($("#container").find(".logos").length > 0 && data == "logos") {
        $("#container").find(".logos").show();
        return false; 
    }

    var htmlappend = $("<div></div>")
                          .addClass(type)
                          .addClass(data);

    $("#container").find(".remover-class").remove();
    $("#container").find(".hidde-class").hide();

    $("#container").append(htmlappend);

    $("#container").find("." + data).load("file_" + data + "_.html");

    return false;

});

---

I would unbind the click event when clicked to prevent further load requests

$('#button').click(function(e) {
    e.preventDefault();
    $('#button').unbind('click');
    $('#result').load('ajax/test.html ' + 'someid', function() {
      //load callback
    });
});

or use one.click which is a better answer than this :)

---

You could dump the returned html into a variable and then check if the variable is null before doing another ajax call

var logos = null;
var banners = null;
var footer = null;

$(".logos").click(function(){
    if (logos == null) // do ajax and save to logos variable
    else $("div").html(logos)
});

---

Mark nailed it .one() will save extra line of codes and many checks hassle. I used it in a similar case. An optimized way to call that if they are wrapped in a parent container which I highly suggest will be:

$('#id_of_parent_container').find('button').one("click", function () {
    //get the id of the button that was clicked and do the ajax load accordingly
});