Question

I have this jQuery script:

$(".show-div").data('loaded',false).click(function() {
    $.post("script.php", {id_1: var_id_1, id_2: var_id_2}, function(data){
        $(this).data('loaded',true);
        $("#display").html(data);
    });

    $("#display").toggle('fast');
    return false;
});

That loads a page (script.php) and displays its content inside the #display div from the current page. Now, what I’m trying to do is load script.php only the first time the .show-div is clicked, but instead it gets loaded each time. Why? What am I doing wrong?

Answer 1

$(".show-div").click(function() {
    if (!$(this).data('loaded'))  // <====
    {
        $.post("script.php", {id_1: var_id_1, id_2: var_id_2}, function(data){
            $("#display").html(data);
            $(this).data('loaded',true);
        });
    }

    $("#display").toggle('fast');
    return false;
});

Another way to go:

$(".show-div").one('click', function() {
    $.post("script.php", { id_1: var_id_1, id_2: var_id_2}, function(data) {
            $("#display").html(data);});
    return false;
}).click(function() {
    $("#display").toggle('fast');
    return false;
});​