জেকুয়েরি delegate() মেথড
<div> এলিমেন্টের মধ্যের <p> এলিমেন্টকে যদি ক্লিক করা হয়, তবে সকল <p> এলিমেন্টের ব্যাকগ্রাউন্ড কালার পরিবর্তন হবেঃ
সংজ্ঞা এবং ব্যবহার
নির্বাচিত এলিমেন্টের চাইল্ডের জন্য delegate() মেথড এক বা একাধিক ইভেন্ট হ্যান্ডলার যোগ করে এবং ইভেন্টটি ঘটলে একটি ফাংশন রান করার নির্দেশ দিয়ে দেয়।
delegate() মেথডের সাহায্যে যোগ করা ইভেন্ট হ্যান্ডলার চলতি এবং ভবিষ্যতের সকল এলিমেন্টের জন্য কাজ করবে(যেমন স্ক্রিপ্টের মাধ্যমে তৈরি হওয়া কোন এলিমেন্ট)।
জেকুয়েরি ভার্সন ১.৭ এ, এলিমেন্টে ইভেন্ট হ্যান্ডলার যোগ করতে on() মেথড ব্যবহার করা হয়।
সিনট্যাক্স ও ব্যাখ্যা
$(selector).delegate(childSelector,event,data,function)
প্যারামিটার ও তাদের ভ্যালু
নিচের টেবিলে delegate() মেথডে ব্যবহৃত প্যারামিটার এবং প্যারামিটারের সম্ভাব্য ভ্যালু গুলো দেখানো হলোঃ
| প্যারামিটার | বিবরণ |
|---|---|
| childSelector | আবশ্যক। ইভেন্ট হ্যান্ডলার যোগ করার জন্য এক বা একাধিক চাইল্ড এলিমেন্টকে নির্দেশ করে |
| event | আবশ্যক। এলিমেন্টে যোগ করার জন্য এক বা একাধিক ইভেন্টকে নির্দেশ করে একাধিক ইভেন্ট ভ্যালু স্পেসের সাহায্যে লিখতে হয়। অবশ্যই ভ্যালিড ইভেন্ট হতে হবে |
| data | ঐচ্ছিক। ফাংশনের সাথে পাস করার জন্য অতিরিক্ত ডাটাকে নির্দেশ করে |
| function | আবশ্যক। ইভেন্ট ঘটলে যে ফাংশনটি রান হবে তা নির্দেশ করে |
delegate মেথড সংক্রান্ত উদাহরণ
উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরির উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div").delegate("p", "click",function(){
$("p").css("background-color", "red");
});
});
</script>
</head>
<body>
<div style="background-color:green;">
<p>ডিভ(div) এলিমেন্টের ভিতরে এটি একটি প্যারাগ্রাফ।</p>
</div>
<p>এটি একটি প্যারাগ্রাফ। </p>
</body>
</html>
ফলাফল
পরবর্তীতে তৈরি হওয়া এলিমেন্টে ইভেন্ট হ্যান্ডলার যুক্ত করা
আমরা নিম্নের উদাহরণে দেখবো যেসকল এলিমেন্ট এখনো তৈরি হয়নি, সেগুলোতে কিভাবে delegate() মেথড ব্যবহার করে ইভেন্ট হ্যান্ডলার যোগ করা যায়ঃ
উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরির উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div").delegate("p", "click", function(){
$(this).slideToggle();
});
$("button").click(function(){
$(">p<এটি একটি নতুন প্যারাগ্রাফ।>/p<").insertAfter("button");
});
});
>/script<
>/head<
>body<
>div style="background-color:yellow"<
>p<এটি একটি প্যারাগ্রাফ।>/p<
>p<p এলিমেন্টকে অদৃশ্য করার জন্য যেকোন p এলিমেন্টে ক্লিক করুন যার এটিও অন্তর্ভূক্ত থাকবে।>/p<
>button<এই বাটনটির পর নতুন একটি p এলিমেন্ট অন্তর্ভূক্ত করুন>/button<
>/div<
>p<>b<নোট:>/b< live() মেথডের পরিবর্তে delegate() মেথড ব্যবহারের কারনে, শুধুমাত্র div এলিমেন্টের মধ্যের p এলিমেন্টটি প্রভাবিত হবে।>/p<
</body>
</html>
ফলাফল
ফাংশনে ডাটা পাস
নিম্নের উদাহরণে আমরা দেখবো কিভাবে একটি ইভেন্ট হ্যান্ডলার ফাংশনে ডাটা পাস হয়ঃ
উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরির উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function msghandler(e){
alert(e.data.messege);
}
$(document).ready(function(){
$("span").delegate({messege: "আপনি মাত্র আমাকে ক্লিক করেছেন!"}, "click", msghandler)
});
</script>
</head>
<body>
<span>এখানে ক্লিক করুন!</span>
</body>
</html>
ফলাফল