jQuery 1.4 Alpha 1 And The Live Event

Posted by: Malcolm Sheridan , on 12/10/2009, in Category jQuery and ASP.NET
Views: 28849
Abstract: The following article demonstrates how to use live event in the new jQuery 1.4 Alpha 1 library.
jQuery 1.4 Alpha 1 And The Live Event
 
A couple of days ago John Resig made an announcement that jQuery 1.4 Alpha 1 has been released! The code has been tested in all the browsers they support and is in a stable condition. Here are the two downloads available right now:
Some of the new features that have been optimized include the Live event. This event was dramatically overhauled and now supports the following events:

- change

- mouseenter

- mouseleave

- focus

- blur

To demonstrate this I’ve created two aspx files. One’s running jQuery 1.3.2 and the other 1.4 Alpha 1. The basic concept is I have a text box and a button. Whenever the text box receives focus, a small snippet of JavaScript will write the contents of the text box to a <div> element. This works fine if you have static controls, but if you add controls dynamically through JavaScript, the live event cannot bind the event handler to the focus event in jQuery 1.3.2. Here’s the code:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>jQuery 1.3.2 Live() Event</title>
    <script language="javascript" type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
    <script language="javascript" type="text/javascript">
        $(function() {
            $("input[type=text]").bind("focus", function() {
                $("#result").text($(this).val()); 
            });
 
            $("#btnAdd").click(function(e) {
                $("#Demo").clone().insertAfter($(this));
                $("<br /><br />").insertAfter($(this));
                e.preventDefault();
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <h1>jQuery 1.3.2 Live() Event</h1>
        <div>       
            <input id="Demo" type="text" maxlength="32" />
            <br /><br />
            <input id="btnAdd" type="button" value="Add Text Box" />  
            <div id="result"></div>    
        </div>   
    </form>
</body>
</html>
Notice how I’m using the bind event?
$("input[type=text]").bind("focus", function() {
If I used live instead, the code would not work:
$("input[type=text]").live("focus", function() {
Thankfully this has been fixed in jQuery 1.4 Alpha 1. Here’s the new code:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>jQuery 1.4 Alpha 1 Live() Event</title>
    <script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.4a1.min.js"></script>
    <script language="javascript" type="text/javascript">
        $(function() {
            $("input[type=text]").live("focus", function() {
                $("#result").text($(this).val());     
            });
 
            $("#btnAdd").click(function(e) {
                $("#Demo").clone().insertAfter($(this));
                $("<br /><br />").insertAfter($(this));            
                e.preventDefault();
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <h1>jQuery 1.4 Alpha 1 Live() Event</h1>
        <div>       
            <input id="Demo" type="text" maxlength="32" />
            <br /><br />
            <input id="btnAdd" type="button" value="Add Text Box" />       
            <div id="result"></div>
        </div>        
    </form>
</body>
</html>
The only difference is this line of code:
$("input[type=text]").live("focus", function() {
If you ran this code now and created dynamic text boxes by clicking the button, the live event will be executed whenever current and future text boxes receive focus. This is a welcome addition to the jQuery library in my opinion.
This is a nice and easy way to add more richness to your application through jQuery. The entire source code of this article can be downloaded over here


Malcolm Sheridan is an independent contractor who has been working with Microsoft technologies since VB4. Malcolm has worked with .NET since its inception and thoroughly enjoys ASP.NET.
 

This article has been editorially reviewed by Suprotim Agarwal.

Absolutely Awesome Book on C# and .NET

C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.

We at DotNetCurry are very excited to announce The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).

Organized around concepts, this Book aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on the latest .NET Core 3.0, .NET Standard and C# 8.0 (final release) too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.

Click here to Explore the Table of Contents or Download Sample Chapters!

What Others Are Reading!
Was this article worth reading? Share it with fellow developers too. Thanks!
Share on LinkedIn
Share on Google+

Author
Malcolm Sheridan is a Microsoft awarded MVP in ASP.NET, a Telerik Insider and a regular presenter at conferences and user groups throughout Australia and New Zealand. Being an ASP.NET guy, his focus is on web technologies and has been for the past 10 years. He loves working with ASP.NET MVC these days and also loves getting his hands dirty with jQuery and JavaScript. He also writes technical articles on ASP.NET for SitePoint and other various websites. Follow him on twitter @malcolmsheridan


Page copy protected against web site content infringement 	by Copyscape




Feedback - Leave us some adulation, criticism and everything in between!
Comment posted by Marco Pacheco on Thursday, December 10, 2009 8:51 PM
This article should be included in the official documenation while explaining jquery 1.4 live event. The concept has been explained very well with an example. 5 stars *****
Comment posted by Jamaal on Friday, December 11, 2009 1:05 AM
Good article. Once jquery 1.4 is released will the 1.3 code run using that library? We are developing a site and now do not know whether it would be worth waiting for 1.4?
Comment posted by Malcolm Sheridan on Friday, December 11, 2009 4:01 AM
@Marco
Thanks for the comments. I appreciate them :)

@Jamaal
The 1.3.2 library should run without any issues.  If I was you I'd start using 1.4 right now.  I am.

Categories

JOIN OUR COMMUNITY

POPULAR ARTICLES

C# .NET BOOK

C# Book for Building Concepts and Interviews

Tags

JQUERY COOKBOOK

jQuery CookBook