জেকুয়েরি undelegate() মেথড
সংজ্ঞা এবং ব্যবহার
delegate() মেথডের সাহায্যে যুক্ত এক বা একাধিক ইভেন্ট হ্যান্ডলারকে undelegate() মেথডের সাহায্যে বাদ দেওয়া হয়।
জেকুয়েরি ভার্সন ১.৭ থেকে, এলিমেন্টে ইভেন্ট হ্যান্ডলার যোগ এবং বাদ দিতে on() এবং off() মেথড ব্যবহার করা হয়।
সিনট্যাক্স ও ব্যাখ্যা
$(selector).undelegate(selector,event,function)
প্যারামিটার ও তাদের ভ্যালু
নিচের টেবিলে undelegate() মেথডে ব্যবহৃত প্যারামিটার এবং প্যারামিটারের সম্ভাব্য ভ্যালু গুলো দেখানো হলোঃ
| প্যারামিটার | বিবরণ |
|---|---|
| selector | ঐচ্ছিক। সিলেক্টরের নাম নির্দেশ করা হয় যার ইভেন্ট হ্যান্ডলার বাদ দেওয়া হবে। |
| event | ঐচ্ছিক। ইভেন্ট হ্যান্ডলার ফাংশন থেকে বাদ দেওয়ার জন্য এক বা একাধিক ইভেন্ট টাইপ নির্দেশ করে। |
| function | ঐচ্ছিক। বাদ দেওয়ার জন্য একটি নির্দিষ্ট ইভেন্ট হ্যান্ডলার ফাংশনকে নির্দেশ করে। |
undelegate() মেথড সংক্রান্ত উদাহরণ
এলিমেন্টের মধ্যে delegate() মেথডের সাহায্যে যুক্ত হওয়া সকল ইভেন্ট হ্যান্ডলার রিমুভ:
উদাহরণঃ
<!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(){
$("body").delegate("p", "click", function(){
$(this).slideToggle();
});
$("button").click(function(){
$("body").undelegate();
});
});
</script>
</head>
<body>
<p>এটি একটি অনুচ্ছেদ </p>
<p>এটি অন্য একটি অনুচ্ছেদ </p>
<p>এটি অদৃশ্য করতে কোন P উপাদান ক্লিক করুন </p>
<button>সব উপাদান থেকে ইভেন্ট হ্যান্ডলার সরান এবং delegate()মেথড যোগ করুন। </button>
</body>
</html>
ফলাফল
সকল ক্লিক ইভেন্ট হ্যান্ডলার বাদ দেই
<p> এলিমেন্টের জন্য undelegate() মেথড ব্যবহার করে কিভাবে সকল ক্লিক ইভেন্ট হ্যান্ডলার বাদ দেওয়া যায়।
উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরির উদাহরণ </title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> </script>
<script>
function changeSize() {
$(this).animate({fontSize: "+=3px"});
}
function changeSpacing() {
$(this).animate({letterSpacing: "+=2px"});
}
$(document).ready(function(){
$("body").delegate("p", "click", changeSize);
$("body").delegate("p", "click", changeSpacing);
$("button").click(function(){
$("body").undelegate("p", "click");
});
});
</script>
</head>
<body>
<p>এটি একটি প্যারাগ্রাফ। </p>
<p>এটি অন্য একটি প্যারাগ্রাফ। </p>
<p>ফন্টের আকার এবং অক্ষরের মধ্যে দূরত্ববাড়ানোর জন্য যেকোন p এলিমেন্ট ক্লিক করুন। </p>
<button>p এলিমেন্টের জন্য নির্দিষ্ট করা (delegate() মেথড দ্বারা যুক্তকৃত) সকল "click" ইভেন্ট হ্যান্ডলার রিমুভ করুন </button>
</body>
</html>
ফলাফল
delegate() মেথডের সাহায্যে যুক্ত একটি নির্দিষ্ট ফাংশনকে বাদ দেই কিভাবে একটি নির্দিষ্ট ফাংশনকে undelegate() মেথড ব্যবহার করে বাদ দেওয়া যায়।
উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরির উদাহরণ </title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> </script>
<script>
function changeSize() {
$(this).animate({fontSize: "+=3px"});
}
function changeSpacing() {
$(this).animate({letterSpacing: "+=2px"});
}
$(document).ready(function(){
$("body").delegate("p", "click", changeSize);
$("body").delegate("p", "click", changeSpacing);
$("button").click(function(){
$("body").undelegate("p", "click", changeSize);
});
});
</script>
</head>
<body>
<p>এটি একটি প্যারাগ্রাফ। </p>
<p>এটি অন্য আরেকটি প্যারাগ্রাফ। </p>
<p>আকার এবং অক্ষরের মধ্যে দূরত্ব বৃদ্ধি করতে যেকোন p এলিমেন্টে ক্লিক করুন </p>
<button>সকল p এলিমেন্টের changeSize() ইভেন্ট হ্যান্ডলার রিমুভ করুন </button>
</body>
</html>
ফলাফল