events

preventDefault not firing on onkeyup event

Simple one.

$(document).on('#element', 'keyup', function(event) {
    if (event.keyCode == 13) {
        event.preventDefault();
        //do some other stuff
    }
});

This doesn’t actually work as the Key Up event is too late down the event queue for preventDefault() to have any effect. Change your code to utilise the keydown or keypress event instead and you should be fine.

Cancelling the event for jQuery imgAreaSelect

http://odyniec.net/projects/imgareaselect/

I have been using this excellent jQuery plugin which allows the user to draw a lasso around several objects to highlight then and bulk change them. However, they way I was using it, meant that the div that the event was bound to always drew the selection object. And I needed it to be draggable at the same time (like a switch)

So it was easy really, I used the unbind() event:

$(‘#object’).unbind();

Job done

Viewing events attached to elements via JavaScript

If like myself, you often attach functions to elements using jQuery, for example:

$('.btnName').live('click', function() {
    //do something
});

There is a nice little browser extension that will show all the elements on the page with a little bubble outlining the attached events/functions.

It is written by Allan Jardine, and you can get it from http://www.sprymedia.co.uk/article/Visual+Event

 

 

JQuery – bind event to non existant element

We all have to bind events to elements:

$('#link).click(function(){
    do some stuff
 });

But, what if that element doesn’t exist yet? Well, you can use the “live” handler:

$('#link').live('click', function(){
    do some stuff
 });

This will carry the event handler on and will match any future element that matches the selector.

More information can be found here: http://api.jquery.com/live/