How to use jQuery .on() instead of .live()

Sun, 15 Jan 2012 21:52:25 +0000

One of the most used features of jQuery is the easy methods it provides to to attach event handlers to dom elements like this simple example:

$('.submitButton').click(function() {
    validateForm();
});

It doesn’t get much easier than that. However, a lot of times we’ll want to attach events to elements that were loaded after the initial page load such as from the result of an ajax request. This is where the .live() method comes in really handy:

$('.submitButton').live('click', function() {
    validateForm();
});

However if you’re using jQuery 1.7 and up you now have access to the .on() method which is a very versatile method offering a number of improvements over .live(). This post does a good job of explaining the main issues with using live, all of which you can avoid by using .on().

So how do you go about using .on()? Well .on() basically provides a consistent interface for practically all your event binding needs. You can replace the first example with:

$('.submitButton').on('click', function() {
    validateForm();
});

and you can obviously replace 'click' with whatever event you wish to handle.

Now to replace the previous live() example with .on() requires the tiniest bit more effort. The way .on() works is it will attach the event to the first selector you specify and if you specify a second selector it will look at all the events that bubble up to it and will only execute the event handler for events that came child elements matching the second selector. So we could replace the example with this:

$('#userForm').on('click', '.submitButton', function() {
    validateForm();
});

Since the submitButton element is a child of the userForm element, the click event from the button will bubble up the dom and when it reaches the form element our event handler will be called. This is how we can dynamically insert as many elements with the calls submitbutton and have them be automatically handled. This is essentially the same thing that .live() accomplishes however it does so by automatically attaching the event handler to the document element which can have performance implications as now our click event would have to bubble all the way up the dom tree to the document before the handler will see it. It would look like this:

$('document').on('click', '#submitButton', function() {
    validateForm();
});

Let’s look at one last examle:

$("#dataTable tr").live("click", function(event){
    alert($(this).text());
});

This is a fairly common scenario where #dataTable is populated dynamically by data retrieved asynchronously from the server. Again the issue here is that all the events have to bubble up to the document before they are seen by the handler. We can instead replace this with:

$("#dataTable tbody").on("click", "tr", function(event){
    alert($(this).text());
});

Thank you for keeping RSS alive. You're awesome.

Reply by email

Allow pasting multiple lines in IE textbox

Wed, 12 Oct 2011 23:21:07 +0000

You may have noticed before that if you try to paste more than one line of text into a textbox in Internet explorer it will on only paste in the first line and disregard the rest. Firefox and Chrome on the other hand will automatically paste all lines of the text onto the one line of the textbox. This issue came up in one of the projects I’m currently working on where we wanted users to be able to paste in a list of ID numbers they wanted to run a search on.

I knew it was possible to get it working in IE since I had seen it done with the search box on Google Maps. I figured the way to do it would be to be to capture the text from the clipboard when the user is attempting to paste it into the textbox and reformat the text into a single line. In the end this is what the javascript looked liked:

if (window.clipboardData) {
        $('#textboxId').bind('paste', function (e) {
            var clipped = window.clipboardData.getData('Text');
            clipped = clipped.replace(/(\r\n|\n|\r)/gm, " "); //replace newlines with spaces
            $(this).val(clipped);
            return false; //cancel the pasting event
        });
    }

To begin with, I’m using jQuery because it’s incredibly powerful and it’s 2011 and if you’re not using a javascript library then you are missing out. This allows me to bind an event handler for the paste event to the textbox element. Note that the paste event is supported in practically all browsers however for security reasons accessing the clipboard is only supported in IE. Fortunately for this purpose I’m only interested in Intenet Explorer and we can get the text with window.clipboardData object. Passing ‘Text’ into the getData() function is required to return the data as text.

Next calling .replace() on the text to replace all of the newline characters with spaces (or any delimeter we choose). Then we simply set the value of the textbox to the newly formatted text.

clipped = clipped.replace(/(\r\n|\n|\r)/gm, " "); //replace newlines with spaces
$(this).val(clipped);

Also don’t forget to call return false; to prevent the original text from still being pasted in.

Lastly we need to handle what will happen in all other browsers. We only want to attempt to read from clipboardData in IE since it will be undefined in all other browsers. One way to accomplish this is by detecting what browser the user has however this is not recommended. The trend nowadays is to use feature detection and there are entire javascript libraries such as Modernizr dedicated to detecting which features a browser supports and then degrading gracefully when it doesn’t. In this case we can simply surround our code with an if statement to ensure our code won’t cause any errors outside of Internet Explorer.

if (window.clipboardData){}

And there you go, overcoming one of Internet Explorer’s shortcomings with some simple and concise javascript.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Jquery on Brandon Pugh's Blog

How to use jQuery .on() instead of .live()

Allow pasting multiple lines in IE textbox