JQuery stop function after too many clicks

Question

How to stop a function from loading after a user clicks a link too many times?

JQuery code looks like this:

$(document).ready(function(){
$(".menu_rfr").click(function() {
$("#main").html('<img src="img/spin.gif" class="spin">');
location.replace($(this).attr('rel'));

});

$(".menu_clickable").click(function() {
$("#main").html('<img src="img/spin.gif" class="spin">');
$("#main").load($(this).attr('rel'));

});

});

HTML:

<div class="menu_rfr prof_info" id="prof_info" rel="?a=1">info</div>
<div class="menu_clickable prof_info3" id="prof_info" rel="?a=3">info 3</div>

EDIT:

this is a link to an example page with this jQuery code. link text

Answer 1

Disable the button after pressing it:

$(".menu_clickable").click(function() {
    $(this).attr("disabled", "disabled");
    $("#main").html('<img src="img/spin.gif" class="spin">');
    $("#main").load($(this).attr('rel'), function() {

        // reactivate it after some loading has completed
        $(this).removeAttr("disabled");        
     });
});

You should always activate the link in the callback successto make sure the download is complete, for example:

$.get($(this).attr('rel'), function(html) {
    $("#main").html(html);
    $(this).removeAttr("disabled");
});

EDIT: Updated based on your comment. If your “action” element is a div, you will have to cancel the click event to prevent the effect from re-clicking and re-link after the download is complete, for example:

function handleClick() {
    $(this).unbind("click");
    $("#main").html('<img src="img/spin.gif" class="spin">');
    $("#main").load($(this).attr('rel'), function() {

        // reactivate it after some loading has completed
        $(this).click(handleClick);        
    });        
}
$(".menu_clickable").click(handleClick);

Answer 2

, karim, , , . , .

, , , false dblclick .

Answer 3

( ), .data(), , , .

$(".menu_clickable").click(function() {
    var menuItems = $('.menu_clickable');

    if (!menuItems.data('current')) {
        $("#main").html('<img src="img/spin.gif" class="spin">');
        $("#main").load($(this).attr('rel'), function () {
            menuItems.removeData('current');
        });

        menuItems.data('current', true);
    };
});

(?), , , .

Answer 4

.live() , :

$(".menu_clickable:not(.disabled)").live('click', function() {
  $(this).addClass('disabled');
  $("#main").html('<img src="img/spin.gif" class="spin">')
            .load($(this).attr('rel'), function() {
              $(this).removeClass('disabled');
  });
});

.live(), . , "disabled" , .live(), . , , .live(), / click.

CSS, , , :

.disabled { color: red; }