讓CSS定位僅更改一次的onclick

Question

代碼：

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


    if(...) 
    { 
    $("#container-5").css({"top":y,"left":x}); 
    $(this).unbind('click'); 
    e.stopPropagation(); 

    } 
    else if(...) 
    { 

    .... 

    }); 
}); 

當我main_div點擊它會檢查，如果功能和收益。容器5的Css也改變了。現在一旦改變了CSS，我不希望它在main_div點擊上繼續改變。所以我試過$(this).unbind('click');但是這沒有幫助，因爲我希望main_div被點擊多次，因爲我可以執行其他功能。幫助真的很感激。

Answer 1

只需添加回調函數內的額外if聲明，這將是真正的第一次和假永遠算賬：

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

Answer 2

的另一種方式，也許更優雅的一個，將發射的onclick處理程序只有一次使用jQuery的.one()方法。你會執行它如下：

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

請注意，這至少可以節省4行代碼！