Question

Possible Duplicate:
execute a function only once

i have this bit of code and i would like the DIV insideframe to move just once, and it works if i click with an interval of time.

if i make many clicks at once, it will move endlessly, not only once :/

$(document).ready(function(){
    $(".arrow").click(function(){
        pos = $("#insideframe").css('margin-left');
        pos = (pos.substr(0, 3));
        var posi = parseInt(pos);
        if(posi < -23 ){
            die();
        }else if(posi > -20 ){
            $("#insideframe").animate({
                marginLeft: '-=230'
                }, 800 );
        }
    });
});

How can i make it trigger just once?

Answer 1

You can add data to the div when the click event occurs and check for it on subsequent clicks.

Like so:

$(document).ready(function(){
    $(".arrow").click(function(){

        //Check here if clicked already and return if so
        if($(this).data('clicked') == 'yes')return;
        $(this).data('clicked', 'yes');

        pos = $("#insideframe").css('margin-left');
        pos = (pos.substr(0, 3));
        var posi = parseInt(pos);
        if(posi < -23 ){
            die();
        }else if(posi > -20 ){
            $("#insideframe").animate({
                marginLeft: '-=230'
                }, 800 );
        }
    });
});