বাইন্ড, লাইভ এবং ডেলিগেইট (Bind, Live & Delegate) :

এসকল jQuery ফাংশন গুলি selector অথবা element এর সাথে events attach করার জন্য ব্যবহৃত হয়। কিন্তু প্রশ্ন হল তাহলে তিনটি একই ফাংশন রাখার প্রয়োজন কি ? আসলে ব্যাপারটা ঠিক তা নয়। তাই এই পোস্টে, আমি এই function তিনটি সম্পর্কে বিস্তারিত আলোচনা করবো।

বাইন্ড(bind) :

bind() method যেকোন element এর সাথে event কে bind করে।

<a>Link 1</a>

নীচের jQuery code টুকু page এর সমস্ত anchor tag এর সাথে click event কে bind করবে।

$(document).ready(function() {
  $("a").bind('click', function() {
      alert('I am clicked');
  });
});

সুতরাং bind() এর সুবিধা হল একই type এর element এর জন্য প্রতিটি element এ click event সংযোগ করার প্রয়োজন নেই। শুধু event টির নাম লিখলেই এটি automatically প্রতিটি element এর সাথে attach হয়ে যাবে। আপনি কোন element কে নির্দিষ্ট class দিয়েও bind করতে পারেন। নিম্নে এ সম্পকিত একটি উদাহরন দেখুন :

$("a.link").bind('click', function() {
   alert('I am clicked');
});

আপনি চাইলে bind() এর সাহায্যে যে কোন element এর সাথে একাধিক event কে attach করতে পারেন। যেমন :

$("a.link").bind('click mouseover', function() {
   alert('I am clicked');
});

উপরের কোডের সমস্যা হল, এটি উভয় ইভেন্টের জন্য একই functionality সর্বারাহ করবে। আপনি যদি প্রতিটি event এ ভিন্ন ভিন্ন functionality/logic কাজ করাতে চান তাহলে কি করবেন ? এক্ষে নিচের মত ভিন্ন ভিন্ন event এর সাথে ভিন্ন ভিন্ন functionality/logic add করতে হবে।

$('a.link').bind({
  click: function() {
      alert('I am clicked');
  },
  mouseover: function() {
     alert('Mouseover event');
  }
});

লাইভ(live) :

এটিও bind() এর মত event কে element এর সাথে attach করে। কিন্তু bind() -এ সমস্যা হল আপনি যখন run time -এ অথবা dynamically document এর মধ্যে কোন element যুক্ত করবেন, সেক্ষেত্রে bind() dynamically যুক্ত হওয়া element এর সাথে event কে attach করতে পারবেনা। এধরনের পরীস্থিতিতে আপনাকে live() ব্যবহার করতে হবে। নিচের উদাহরনটি দেখুন :

<button id="btnAdd">Add More A Tag</button>

এখানে আমি button এর সাথে click event যুক্ত করেছি যা page এ link class যুক্ত একটি anchor tag(<a>) যুক্ত করবে।

$('#btnAdd').click(function() {
    $('body').append(' <a class="link">Link 2</a>');
       return false;
});

উপরোক্ত code টুকুর মাধ্যমে আপনি নতুন সংযুক্ত anchor tag এর click event পাবেননা; এ সমস্যা সমাধানের জন্য আপনাকে .live() ব্যবহার করতে হবে। নিচের code টুকু দেখুন :

$("a.link").live('click', function() {
    alert('I am clicked');
});

[বি:দ্র: live() methode টি jQuery 1.3 অথবা upper version গুলিতে কাজ করবে।]

ডেলিগেইট(delegate) :

jQuery 1.4.2 "delegate()" নামক একটি নতুন methode নিয়ে আসে, যা এক বা একাধিক event কে element এর সাথে attach করতে সক্ষম। নিচের উদাহরনটিতে আমি একটি table তৈরি করেছি এবং তাতে delegate() method ব্যবহার করেছি। এখানে আমি প্রত্যেক td element এর সাথে click event কে attach করতে চাই।

<table border="1" width="200px" cellspacing="5" cellpadding="5">
   <tr>
       <td>Item 1</td>
       <td>Item 2</td>
   </tr>
   <tr>
       <td>Item 3</td>
       <td>Item 4</td>
   </tr>
</table>

jQuery delegate() method code :

$(document).ready(function(){
  $("table").delegate("td","click",function(){
         alert('I am' + $(this).text());
  });
});

এটি ৩টি argument (Selector, Event Type, Event Handler) নিয়ে কাজ করে।

লেখকঃ ঢাকা প্রকৌশল ও প্রযুক্তি বিশ্ববিদ্যায়ের(DUET) কম্পিউটার সায়েন্স এ্যান্ড ইঞ্জিনিয়ারিং(CSE) বিভাগের ৪র্থ বর্ষের এক জন ছাত্র। তিনি ওয়েব ডিজাইন, ওয়েব ডেভলপমেন্ট এর বিভিন্ন বিষয় যেমন : এইচটিএমএল, সিএসএস, জাভাস্ক্রিপ্ট, জে কোয়েরি, পিএইচপি, .Net ইত্যাদি বিষয়ের উপর অভিজ্ঞ। তিনি ACM ICPC সহ বিভিন্ন আন্তর্জাতিক প্রোগ্রামিং প্রতিযোগীতায় অংশগ্রহন করেছেন। তাকে ফেসবুকে অনুসরন করতে এখানে ক্লিক করুন।