Question

This are my two functions, on single click it works fine, but on dblclick both functions execute, any idea? I tried using live instead of delegate but still both functions execute on dblclick

// Change Status on click
$(".todoBox").delegate("li", "click", function() {
    var id = $(this).attr("id");
    $.ajax({            
        //ajax stuff
});

return false;
});



// Double Click to Delete
$(".todoBox").delegate("li", "dblclick", function(){
    var id = $(this).attr("id");
    $.ajax({  
      //ajax stuff 
    });

return false;
});

Answer 1

From the API documentation:

It is inadvisable to bind handlers to both the click and dblclick events for the same element. The sequence of events triggered varies from browser to browser, with some receiving two click events and others only one. If an interface that reacts differently to single- and double-clicks cannot be avoided, then the dblclick event should be simulated within the click handler. We can achieve this by saving a timestamp in the handler, and then comparing the current time to the saved timestamp on subsequent clicks. If the difference is small enough, we can treat the click as a double-click.

I think that means you’d do your click action in the timeout handler. If you get another click, and the timeout handler hasn’t happened yet, you cancel the timeout and do the dblclick code.