জেকুয়েরি unbind() মেথড
সংজ্ঞা এবং ব্যবহার
নির্বাচিত এলিমেন্ট থেকে unbind() মেথড ইভেন্ট হ্যান্ডলার রিমুভ করে দেয়।
এই মেথডটি সকল অথবা নির্বাচিত ইভেন্ট হ্যান্ডলার, অথবা ইভেন্ট ঘটলে নির্দিষ্ট ফাংশনকে রান হতে বিরত রাখে।
এই মেথড ইভেন্ট অবজেক্ট ব্যবহার করেও ইভেন্ট হ্যান্ডলার বাদ দিতে পারে।
নোট: যদি কোন প্যারামিটার দেওয়া না থাকে unbind() মেথড নির্দিষ্ট এলিমেন্টের জন্য সকল ইভেন্ট হ্যান্ডলার বাদ দিয়ে দেয়।
নোট: জেকুয়েরির যেকোন ইভেন্ট হ্যান্ডলারে unbind() মেথড কাজ করে।
জেকুয়েরি ভার্সন ১.৭ থেকে, এলিমেন্টে ইভেন্ট হ্যান্ডলার যোগ এবং বাদ দিতে on() এবং off() মেথড ব্যবহার করা হয়।
সিনট্যাক্স ও ব্যাখ্যা
$(selector).unbind(event,function,eventObj)
প্যারামিটার ও তাদের ভ্যালু
নিচের টেবিলে unbind() মেথডে ব্যবহৃত প্যারামিটার এবং প্যারামিটারের সম্ভাব্য ভ্যালু গুলো দেখানো হলোঃ
| প্যারামিটার | বিবরণ |
|---|---|
| event | ঐচ্ছিক। এলিমেন্ট থেকে বাদ দেওয়ার জন্য এক বা একাধিক ইভেন্টকে নির্দেশ করে। একাধিক ইভেন্ট ভ্যালুকে স্পেসের মাধ্যমে আলাদা করা হয়। যদি শুধুমাত্র এই প্যারামিটারটি দেওয়া হয়, তবে নির্দিষ্ট ইভেন্টের সকল ফাংশনকে রিমুভ করে দিবে। |
| function | ঐচ্ছিক। এলিমেন্টের জন্য নির্দিষ্ট ইভেন্ট থেকে যে ফাংশনকে বাদ দেওয়া হবে তা নির্দেশ করে। |
| eventObj | ঐচ্ছিক। ইভেন্ট বাইন্ডিং ফাংশন থেকে eventObj প্যারামিটারটি এসেছে। |
unbind() মেথড সংক্রান্ত উদাহরণ
unbind() মেথড ব্যবহার করে কিভাবে এলিমেন্টের জন্য সকল ইভেন্ট হ্যান্ডলার রিমুভ করা যায় তা নিচের উদাহরনে দেখানো হলো:
উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরির উদাহরণ </title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).slideToggle();
});
$("button").click(function(){
$("p").unbind();
});
});
</script>
</head>
<body>
<p>এটি একটি প্যারাগ্রাফ। </p>
<p>এটি আরেকটি প্যারাগ্রাফ। </p>
<p>এটি অদৃশ্য করতে যেকোন p এলিমেন্টে ক্লিক করুন। </p>
<button>সকল p এলিমেন্টের জন্য সবগুলো ইভেন্ট হ্যান্ডলার রিমুভ করুন। </button>
</body>
</html>
ফলাফল
unbind() মেথডে একটি নির্দিষ্ট ফাংশনকে বাদ দেওয়া
unbind() মেথড ব্যবহার করে কিভাবে একটি এলিমেন্টের নির্দিষ্ট ইভেন্ট থেকে একটি ফাংশনকে বাদ দেওয়া যায় , তা নিচের উদাহরনে দেখানো হলো
উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরির উদাহরণ </title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> </script>
<script>
function alertMe() {
alert("হ্যালো বাংলাদেশ!");
}
$(document).ready(function(){
$("p").click(alertMe);
$("button").click(function(){
$("p").unbind("click", alertMe);
});
});
</script>
</head>
<body>
<p>এটি একটি প্যারাগ্রাফ। </p>
<p>এটি অন্য আরেকটি প্যারাগ্রাফ। </p>
<p>এলার্ট বক্স ট্রিগার করার জন্য যেকোন p এলিমেন্টে ক্লিক করুন। </p>
<button>p এলিমেন্টের click ইভেন্ট থেকে এলার্ট বক্স ফাংশন রিমুভ করুন </button>
</body>
</html>
ফলাফল
unbind() মেথডে ইভেন্ট অবজেক্ট ব্যবহার করে ইভেন্ট হ্যান্ডলার বাদ দেওয়া
unbind() মেথড ব্যবহার করে কিভাবে একটি ইভেন্ট অবজেক্ট রিমুভ করা হয় তা নিচের উদাহরনে দেখানো হলো
উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরির উদাহরণ </title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> </script>
<script>
$(document).ready(function(){
var x = 0;
$("p").click(function(event){
$("p").animate({fontSize: "+=5px"});
x++;
if (x >= 2) {
$(this).unbind(event);
}
});
});
</script>
</head>
<body>
<p style="font-size:20px;">আকার বৃদ্ধি করার জন্য এই p এলিমেন্টটিতে ক্লিক করুন। আকার শুধুমাত্র ২ বার বৃদ্ধি পাবে। </p>
</body>
</html>
ফলাফল