Make The CSS Positioning To Be Changed Only Once Onclick

Code : $(document).ready(function(){ $('#main_div').bind('click', function(e){ var x = event.pageX-document.getElementById('main_div').offsetLeft; var y = event.p

Solution 1:

An other way, maybe the more elegant one, would be firing the onclick handler only once using jQuery's .one() method. You would implement it as follows:

$("#main_div").one('click', function(e) {
    //the rest of your code
});

Note that this saves you at least 4 lines of code!

Solution 2:

Just add an additional if statement inside the callback function that will be true the very first time and false forever afterwards:

var hasBeenClicked = false;
$("#main_div").bind('click', function(e){
    if(!hasBeenClicked){
        hasBeenClicked = true;
        ...
        //the rest of your code
        ...
    }
});