|
jQuery 1.4 Alpha 1 And The Live Event
|
|
Rating: 5 user(s) have rated this article
Posted by: Malcolm Sheridan,
on 12/10/2009,
in category "jQuery and ASP.NET"
Views: this article has been read 9689 times
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.