জেকুয়েরি off() মেথড
সংজ্ঞা এবং ব্যবহার
on() মেথডের সাহায্যে যোগ করা ইভেন্ট হ্যান্ডলারকে বাদ দিতে বেশিরভাগ সময় off() মেথড ব্যবহার করা হয়।
জেকুয়েরি ভার্সন ১.৭ এ, unbind(), die() এবং undelegate() মেথডের বদলি হিসেবে off() মেথড ব্যবহার শুরু হয়।
নোট: নির্দিষ্ট কোন ইভেন্ট হ্যান্ডলার বাদ দিতে, সিলেক্টর স্ট্রিংটি on() মেথডের সিলেক্টর স্ট্রিংয়ের মত হতে হবে।
টিপস: যদি এমন ইভেন্ট দরকার হয় যেটা শুধুমাত্র একবারই রান হবে তাহলে one() মেথড ব্যবহার করুন।
সিনট্যাক্স ও ব্যাখ্যা
$(selector).off(event,selector,function(eventObj),map);প্যারামিটার ও তাদের ভ্যালু
নিচের টেবিলে off() মেথডে ব্যবহৃত প্যারামিটার এবং প্যারামিটারের সম্ভাব্য ভ্যালু গুলো দেখানো হলোঃ
| প্যারামিটার | বিবরণ |
|---|---|
| event | আবশ্যক। নির্বাচিত এলিমেন্ট থেকে বাদ দেওয়ার জন্য এক বা একাধিক ইভেন্ট অথবা নেমস্পেস নির্দেশ করা হয়। একাধিক ইভেন্ট ভ্যালু স্পেসের মাধ্যমে আলাদা করা হয়। অবশ্যই ভ্যালিড ইভেন্ট হতে হবে। |
| selector | ঐচ্ছিক। on() মেথডের সাহায্যে ইভেন্ট হ্যান্ডলার যোগ করার জন্য সিলেক্টরের যে নাম দেওয়া হয়েছে সেই নাম। |
| function(eventObj) | ঐচ্ছিক। ইভেন্ট ঘটলে যে ফাংশন রান হবে সেটিকে নির্দেশ করে। |
| map | একাধিক ইভেন্ট এবং ফাংশন যোগ করার জন্য একটি ম্যাপকে ({event:function, event:function, ...}) নির্দেশ করে |
off()মেথড সংক্রান্ত উদাহরণ
নিচের উদাহরনে off() মেথডের ব্যবহার দেখানো হলোঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরি উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").on("click", function(){
$(this).css("background-color", "red");
});
$("button").click(function(){
$("p").off("click");
});
});
</script>
</head>
<body>
<p>এখানে ক্লিক করুন।</p>
<p>নিচের বাটনে ক্লিক করে এখানে ক্লিক করুন।</p>
<button type="button">ক্লিক করুন</button>
</body>
</html>ফলাফল
unbind() এবং off() মেথড
নিচের উদাহরনে unbind() এবং off() মেথডের ব্যবহার দেখানো হলোঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরি উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).css("background-color", "red");
});
$("#b1").click(function(){
$("p.para1").off();
});
$("#b2").click(function(){
$("p.para2").unbind();
});
});
</script>
</head>
<body>
<p class="para1">এখানে ক্লিক করুন।</p>
<p class="para1">নিচের বাটনে ক্লিক করে এখানে ক্লিক করুন।</p>
<button type="button" id="b1">ক্লিক করুন</button>
<p class="para2">এখানে ক্লিক করুন।</p>
<p class="para2">নিচের বাটনে ক্লিক করে এখানে ক্লিক করুন।</p>
<button type="button" id="b2">ক্লিক করুন</button>
</body>
</html>ফলাফল
on() মেথডের সকল ইভেন্টকে বাদ দেওয়া
কিভাবে on() মেথডের সকল ইভেন্টকে বাদ দেওয়া হয় তা নিচের উদাহরনে দেখান হলোঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরি উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function animation1() {
$(this).animate({fontSize: "+=3px"});
}
function animation2() {
$(this).animate({padding: "+=3px"});
}
$(document).ready(function(){
$("body").on("click", "p", animation1);
$("body").on("click", "p", animation2);
$("button").click(function(){
$("body").off("click", "p");
});
});
</script>
</head>
<body>
<p>এখানে ক্লিক করুন।</p>
<p>নিচের বাটনে ক্লিক করে এখানে ক্লিক করুন।</p>
<button type="button">ক্লিক করুন</button>
</body>
</html>ফলাফল
on() মেথডের একটি নির্দিষ্ট ইভেন্টকে বাদ দেওয়া
কিভাবে on() মেথডের একটি নির্দিষ্ট ইভেন্টকে বাদ দেওয়া হয় তা নিচের উদাহরনে দেখান হলোঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরি উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function animation1() {
$(this).animate({fontSize: "+=3px"});
}
function animation2() {
$(this).animate({padding: "+=3px"});
}
$(document).ready(function(){
$("body").on("click", "p", animation1);
$("body").on("click", "p", animation2);
$("button").click(function(){
$("p").off("click", animation1);
});
});
</script>
</head>
<body>
<p>এখানে ক্লিক করুন।</p>
<p>নিচের বাটনে ক্লিক করে এখানে ক্লিক করুন।</p>
<button type="button">ক্লিক করুন</button>
</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>
$(document).ready(function(){
var a = 0;
$("p").click(function(event){
$(this).animate({padding: "+=3px"
});
x++;
if (a >= 2) {
$(this).off(event);
}
});
});
</script>
</head>
<body>
<p>এখানে ক্লিক করুন।</p>
</body>
</html>ফলাফল