www.dntips.ir
مطالب ۳۶۹۴
نویسندگان ۲۷۶
گروه‌های مطالب ۱۰۲۴
نقشه‌های راه ۱۱۹
دوره‌ها ۱۴
اشتراک‌ها ۱۷۹۱۴
عنوان:

‫آشنایی با jQuery Live


نویسنده: وحید نصیری
تاریخ: ۱۳۸۸/۰۵/۲۶ ۱۹:۲۳:۰۰
آدرس: www.dntips.ir

در نگارش‌های اخیر کتابخانه 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 و زنده تحت نظر قرار می‌دهد و عکس العمل نشان خواهد داد.

مطالب مشابه

نظرات

  • مهمان در ۱۳۸۸/۰۵/۲۶ ۲۳:۱۵:۱۹
    ممنون؛ نکته بسیار خوبی بود
  • احمد احمدی در ۱۳۹۱/۰۶/۱۹ ۰:۲۴
    بعضی وقتا که از متد live استفاده می‌کنیم ، رویداد یک المنت چندبار اجرا میشه .
    برای شما هم پیش اومده ؟
    راه حل چیست ؟
    • وحید نصیری در ۱۳۹۱/۰۶/۱۹ ۰:۴۱
      نه این مشکل رو نداشتم ولی راه حلش اضافه کردن return false به انتهای روال رویدادگردان است.
      • احمد احمدی در ۱۳۹۱/۰۶/۲۴ ۱۳:۲۶
        ظاهرا این مشکل در سایت جاری هم وجود دارد :


        • وحید نصیری در ۱۳۹۱/۰۶/۲۴ ۱۳:۳۳
          چند جایی رو تست کردم چنین چیزی مشاهده نشد. در کدام صفحه دقیقا؟ (تمام متدهای live سایت return false دارند)
          آدرس Post یکی است؛ مقادیر Post ارسالی متفاوت (بسته به کلیک بر روی المانی خاص).
          • احمد احمدی در ۱۳۹۱/۰۶/۲۴ ۱۴:۱۸
            هنگام امتیاز دهی به یک مطلب . مثلا همین الان 2 درخواست برای امتیازدهی همین پست ارسال شد .
            در کنسول فایرباگ این کد رو اجرا کنید :
            $(".postRating[sectiontype=BlogPost] .rating[value=5]").click();
            نتیجه 2 درخواست بود برای من .
            دفعات بعد هم شد 3 درخواست .
            • وحید نصیری در ۱۳۹۱/۰۶/۲۴ ۱۸:۵۴
              ممنون. مشکل برطرف شد.
  • علی یگانه مقدم در ۱۳۹۴/۰۴/۰۶ ۱۶:۵
    البته یک نکته تکمیلی که این متد از نسخه 1.7 منسوخ و در نسخه 1.9 از جی کوئری حذف شده و در حال حاضر به جای آن از همان متد on استفاده می‌کنند. نحوه استفاده از on جای live
    • وحید نصیری در ۱۳۹۴/۰۴/۰۶ ۱۶:۲۹
      اگر کدهای قدیمی را نخواستید تغییر دهید، از یک وفق دهنده به نام jquery-migrate می‌توان استفاده کرد. کار آن اضافه کردن امضای متدهای حذف شده و سپس پیاده سازی آن‌ها بر اساس API جدید است.