۱۳۸۸/۰۵/۲۶

آشنايي با jQuery Live


در نگارش‌هاي اخير كتابخانه jQuery (از نگارش 1.3 به بعد) متدي به نام live به آن اضافه شده است كه كاربرد آن‌را در ادامه مرور خواهيم كرد.
ابتدا مثال زير را در نظر بگيريد:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestLive.aspx.cs" Inherits="TestJQueryAjax.TestLive" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>

<script src="js/jquery.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() {
$('a.mylink').click(function(e) {
var $a = $(this);
alert($a.attr('id'));
});

$('a#lnkLoad').click(function(e) {
$('div#dynContent').load('live.ashx');
});
});
</script>

</head>
<body>
<form id="form1" runat="server">
<a href='#' id='lnk1' class='mylink'>link1</a>
<br />
<a href='#' id='lnkLoad'>load .ashx</a>
<div id='dynContent'>
</div>
</form>
</body>

</html>


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;

namespace TestJQueryAjax
{
/// <summary>
/// Summary description for $codebehindclassname$
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class live : IHttpHandler
{

public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
context.Response.Write("<a href='#' id='lnk2' class='mylink'>link2</a>");
}

public bool IsReusable
{
get
{
return false;
}
}
}
}
در اين مثال ساده با كليك بر روي لينك‌هايي با كلاس mylink ،‌ يك alert حاوي id آن لينك نمايش داده خواهد شد.
همچنين اگر بر روي لينكي با id مساوي lnkLoad كليك شود، محتوايي پويا از يك generic handler به نام live.ashx دريافت شده و به div ايي با id مساوي dynContent اضافه مي‌گردد.
اين محتواي دريافتي از generic handler ما نيز كلاسي مساوي mylink دارد، اما اين‌بار هر چقدر بر روي لينك اضافه شده به صفحه كليك كنيم كار نمي‌كند. چرا؟ چون در هنگام فراخواني document.ready ، اين لينك وجود نداشته و روال رخدادگرداني به آن bind نشده است.
به صورت خلاصه مي‌خواهيم روال كليك بر روي لينك‌هايي با كلاس mylink هميشه كار كند. (چه در مورد عناصري در صفحه كه از قبل وجود داشته‌اند و چه عناصري كه توسط عملياتي Ajax ايي بعدا اضافه خواهند شد)
اين مشكل با معرفي متد live حل شده است. براي اين منظور تنها كافي است كد ما به صورت زير تغيير كند:

<script type="text/javascript">
$(document).ready(function() {
$('a.mylink').live("click", function() {
var $a = $(this);
alert($a.attr('id'));
});
.
.
.

اكنون jQuery كليه لينك‌هايي با كلاس مساوي mylink را كه از اين پس اضافه خواهند شد، به صورت live و زنده تحت نظر قرار مي‌دهد و عكس العمل نشان خواهد داد.