বাইন্ড, লাইভ এবং ডেলিগেইট (Bind, Live & Delegate) : জে-কোয়েরী -(পর্ব-৪০)

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

বাইন্ড(bind) :

bind() method যেকোন element এর সাথে event কে bind করে।
[sourcecode language=”html”]
<a>Link 1</a>
[/sourcecode]
নীচের jQuery code টুকু page এর সমস্ত anchor tag এর সাথে click event কে bind করবে।
[sourcecode language=”js”]
$(document).ready(function() {
$("a").bind(‘click’, function() {
alert(‘I am clicked’);
});
});
[/sourcecode]
সুতরাং bind() এর সুবিধা হল একই type এর element এর জন্য প্রতিটি element এ click event সংযোগ করার প্রয়োজন নেই। শুধু event টির নাম লিখলেই এটি automatically প্রতিটি element এর সাথে attach হয়ে যাবে। আপনি কোন element কে নির্দিষ্ট class দিয়েও bind করতে পারেন। নিম্নে এ সম্পকিত একটি উদাহরন দেখুন :
[sourcecode language=”js”]
$("a.link").bind(‘click’, function() {
alert(‘I am clicked’);
});
[/sourcecode]
আপনি চাইলে bind() এর সাহায্যে যে কোন element এর সাথে একাধিক event কে attach করতে পারেন। যেমন :
[sourcecode language=”js”]
$("a.link").bind(‘click mouseover’, function() {
alert(‘I am clicked’);
});
[/sourcecode]
উপরের কোডের সমস্যা হল, এটি উভয় ইভেন্টের জন্য একই functionality সর্বারাহ করবে। আপনি যদি প্রতিটি event এ ভিন্ন ভিন্ন functionality/logic কাজ করাতে চান তাহলে কি করবেন ? এক্ষে নিচের মত ভিন্ন ভিন্ন event এর সাথে ভিন্ন ভিন্ন functionality/logic add করতে হবে।
[sourcecode language=”js”]
$(‘a.link’).bind({
click: function() {
alert(‘I am clicked’);
},
mouseover: function() {
alert(‘Mouseover event’);
}
});
[/sourcecode]

লাইভ(live) :

এটিও bind() এর মত event কে element এর সাথে attach করে। কিন্তু bind() -এ সমস্যা হল আপনি যখন run time -এ অথবা dynamically document এর মধ্যে কোন element যুক্ত করবেন, সেক্ষেত্রে bind() dynamically যুক্ত হওয়া element এর সাথে event কে attach করতে পারবেনা। এধরনের পরীস্থিতিতে আপনাকে live() ব্যবহার করতে হবে। নিচের উদাহরনটি দেখুন :
[sourcecode language=”html”]
<button id="btnAdd">Add More A Tag</button>
[/sourcecode]
এখানে আমি button এর সাথে click event যুক্ত করেছি যা page এ link class যুক্ত একটি anchor tag(<a>) যুক্ত করবে।
[sourcecode language=”js”]
$(‘#btnAdd’).click(function() {
$(‘body’).append(‘ <a class="link">Link 2</a>’);
return false;
});
[/sourcecode]
উপরোক্ত code টুকুর মাধ্যমে আপনি নতুন সংযুক্ত anchor tag এর click event পাবেননা; এ সমস্যা সমাধানের জন্য আপনাকে .live() ব্যবহার করতে হবে। নিচের code টুকু দেখুন :
[sourcecode language=”js”]
$("a.link").live(‘click’, function() {
alert(‘I am clicked’);
});
[/sourcecode]
[বি:দ্র: 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 করতে চাই।
[sourcecode language=”html”]
<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>
[/sourcecode]
jQuery delegate() method code :
[sourcecode language=”js”]
$(document).ready(function(){
$("table").delegate("td","click",function(){
alert(‘I am’ + $(this).text());
});
});
[/sourcecode]
এটি ৩টি argument (Selector, Event Type, Event Handler) নিয়ে কাজ করে।

………………………………………………………………………………
আলোকিত একটা সুন্দর সমৃদ্ধ পৃথিবী আমাদের প্রত্যেকেরই স্বপ্ন । আসুন আমাদের মেধা পরিশ্রম কে বিজ্ঞান সম্মতভাবে ব্যবহার করে, আমাদের স্বপ্ন পূরণে অংশ গ্রহণ করি। আজ এখানেই শেষ করছি। সকলের জন্য শুভকামনা রইল। “HAVE A GOOD PROGRAMMING”