jQuery on(): বেগাইনার গাইড

jQuery on() মেথড একটি এলিমেন্টে একটি ইভেন্ট হ্যান্ডলার সংযুক্ত করার একটি উপায়। সিলেক্টরে পাস করা এলিমেন্টটি পৃষ্ঠার যেকোনো জিনিস হতে পারে। সবচেয়ে সাধারণভাবে, on() একটি বাটনে ক্লিক হ্যান্ডলার সংযুক্ত করার একটি উপায়। প্র্যাকটিসে, on() যেকোনো সিলেক্ট করা এলিমেন্টে যেকোনো ইভেন্ট হ্যান্ডলার সংযুক্ত করতে পারে।

এই গাইডে, আমরা on()-এর বেসিক সিনট্যাক্স কভার করব এবং কিছু প্র্যাকটিক্যাল উদাহরণ একশনে দেখব। এটি উল্লেখ করা গুরুত্বপূর্ণ যে jQuery on() অপশনাল আর্গুমেন্ট এক্সেপ্ট করে যা এখানে কভার করা হয়নি। আমরা রিকোয়ার্ড আর্গুমেন্ট এবং সাধারণ ব্যবহার নিয়ে থাকব। অপশনাল আর্গুমেন্ট সম্পর্কে আরও জানতে এখানে ক্লিক করুন।

jQuery on() কী?

jQuery on() মেথড একটি সিলেক্ট করা এলিমেন্টে একটি ইভেন্ট হ্যান্ডলার সংযুক্ত করার একটি স্থিতিশীল উপায় প্রদান করে। হ্যান্ডলার নামकरण হলে, on() একটি কলব্যাক ফাংশন নেয়। একটি কলব্যাক ফাংশন হলো একটি ফাংশন যা একটি মেথডে পাস করা হয় যাতে সেটি পরে এক্সিকিউট হয়। আমাদের উদ্দেশ্যে, কলব্যাক ফাংশন হলো যেখানে কিছু ঘটবে।

মান লিইয়ে আমরা on() ব্যবহার করি একটি বাটনে ক্লিক ইভেন্ট হ্যান্ডলার সংযুক্ত করতে। আমাদের কলব্যাক ফাংশন হলো যেখানে আমরা ডিফাইন করব বাটন ক্লিক হওয়ার পর কী অ্যাকশন হবে।

on() jQuery সিনট্যাক্স

এখন যেহেতু আমরা on() কীভাবে কাজ করে সেটার একটি ধারণা পেয়েছি, আসুন এর স্পেসিফিক সিনট্যাক্স দেখি। সকল jQuery-এ যেভাবে, আমরা আমাদের এলিমেন্ট সিলেক্ট করি শুরুতে। তারপর on() মেথড কল করি আমাদের ইভেন্ট হ্যান্ডলার সংযুক্ত করতে। on()-এ পাস করা প্রথম আর্গুমেন্ট হলো নিজে ইভেন্ট হ্যান্ডলার নামটি, এবং তারপর কলব্যাক ফাংশন।

$('.btn').on('click', function() {
  alert("You clicked the button!")
})

এখানে, আমরা আমাদের বাটন সিলেক্ট করছি, on() কল করছি, এবং আমাদের রিকোয়ার্ড আর্গুমেন্টগুলো পাস করছি। লক্ষ্য করুন ইভেন্ট হ্যান্ডলার নামটি কোটেশন মার্কে থাকতে হবে। আমাদের কলব্যাক ফাংশনে, আমরা একটি মেসেজ সহ একটি alert দেখাচ্ছি। এটি আমাদের জানাতে দেয় কলব্যাক ফাংশনটি ঠিকমতো কাজ করছে।

jQuery alert() সম্পর্কে আরও জানতে এখানে ক্লিক করুন।

jQuery on() উদাহরণ

আমাদের উপরের বাটন উদাহরণে এক্সপ্যান্ড করি। এখন আমরা jQuery on()-এর বেসিক সিনট্যাক্স জানি। আমাদের উদাহরণের জন্য, বাটন ক্লিক হওয়ার পর একটি alert মেসেজ দেখানোর চেয়ে কিছু বেশি করি।

alert মেসেজের বদলে, বাটন ক্লিক হওয়ার পর নতুন কন্টেন্ট ডিসপ্লে করি। এটি করতে, আমরা আমাদের কলব্যাক ফাংশনের ভিতরে jQuery append() মেথড ব্যবহার করব। jQuery append() আর্গুমেন্ট হিসেবে পাস করা কন্টেন্টকে সিলেক্ট করা এলিমেন্টের শেষে সংযুক্ত করে। jQuery append() সম্পর্কে আরও জানতে এখানে ক্লিক করুন।

শুরু করি, আমরা একটি HTML বাটন এবং একটি

রেন্ডার করছি যেখানে আমরা নতুন কন্টেন্ট append করব।

<button class="btn"> Click me! </button>
<div class="message"> </div>

এটি ফিলহাল শুধু বাটনটি রেন্ডার করবে।

এখানে আমাদের বাটন যা ক্লিক হওয়া চায়! এখন, আমরা jQuery-এ এটি সিলেক্ট করি এবং ক্লিক হওয়ার পর একটি মেসেজ ডিসপ্লে করি।

$('.btn').on('click', function() {
  $('.message').append('The button has been clicked.')
})

আমাদের বাটনটি এর ক্লাস নাম দিয়ে সিলেক্ট করা হয়েছে এবং এটিকে একটি ক্লিক ইভেন্ট হ্যান্ডলার পাস করা হয়েছে। আমাদের কলব্যাক ফাংশনে, আমরা "message" ক্লাস নাম 가진

-এ একটি মেসেজ append করছি।

আমাদের on() মেথডটি কাজ করছে! jQuery append() এখানে ব্যবহার করার সম্পর্কে একটি কথা লক্ষ্য করুন: আমাদের মেসেজটি প্রতি বার বাটন ক্লিক করলে আমাদের

-এর নিচে সংযুক্ত হবে। একটি ভিন্ন উদাহরণ দেখি।

আমাদের পরবর্তী উদাহরণে, বাটনটি ক্লিক হওয়ার পর নতুন কন্টেন্ট দিয়ে রিপ্লেস করব। এটি একটি আরও নিয়ন্ত্রিত ব্যবহারকারীর অভিজ্ঞতা অনুকরণ করবে।

<div>
  <button class="btn"> Click me! </button>
</div>

এখানে, আমরা আমাদের বাটনকে একটি

-এ র‍্যাপ করেছি। এটি আমাদের jQuery html() ব্যবহার করতে দেবে এবং বাটনকে একটি টেক্সট ধারণকারী

ট্যাগ দিয়ে রিপ্লেস করতে দেবে। কখনও কখনও আমরা শুধু চাই ব্যবহারকারী একবার বাটন ক্লিক করলে এবং নতুন কন্টেন্টে ডাইরেক্ট করা হয়!

$('.btn').on('click', function() {
  $('div').html('<p>The button has been replaced</p>')
})

আমাদের আগের উদাহরণের অনুরূপ ফ্যাশনে, আমরা বাটনটি সিলেক্ট করছি এবং on() ব্যবহার করে একটি ক্লিক হ্যান্ডলার সংযুক্ত করছি। আমাদের কলব্যাক ফাংশনের ভিতরে, আমরা বাটন HTML কে একটি প্যারাগ্রাফ এলিমেন্ট দিয়ে রিপ্লেস করছি যাতে নতুন HTML কন্টেন্ট থাকে।

বাটনটি একবার ক্লিক হলে:

আমাদের নতুন কন্টেন্ট আছে এবং কোনো বাটন নেই! এটি ব্যবহারকারীর অভিজ্ঞতাকে একটি আরও নিয়ন্ত্রিত উপায়ে গাইড করার একটি রোবাস্ট উপায়।

উপসংহার

আমরা দেখেছি jQuery on() কীভাবে কিছু লাইনের রোবাস্ট কোডে একটি এলিমেন্টে ইভেন্ট হ্যান্ডলার সংযুক্ত করতে পারে। বেসিক সিনট্যাক্স শেখার পর, আমরা jQuery on() কীভাবে ব্যবহার করা যায় তার দুটি উদাহরণ দেখেছি। এটি নাফিক.entries ফ্লেক্সিবল যাতে এটি একটি স্পেসিফিক উপায়ে বা একটি আরও জেনারেল উপায়ে ব্যবহার করা যায় বাঞ্ছিত ফলাফলের উপর নির্ভর করে।

যেহেতু এই গাইড jQuery on() ব্যবহার করার একটি ইন্ট্রোডাকশন, নিশ্চিত করুন কিছু সময় প্র্যাকটিস করবেন। ইভেন্ট হ্যান্ডলার মাস্ট্রির দিকে এগিয়ে যাওয়ার সাথে সাথে আবিষ্কার করার জন্য অনেক ব্যবহার অপেক্ষা করছে!