jQuery 1.4 Alpha 1 And The Live Event
Posted by: Malcolm Sheridan ,
on 12/10/2009,
in
Category jQuery and ASP.NET
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.
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!
Was this article worth reading? Share it with fellow developers too. Thanks!
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