jQuery click() মেথড ব্যবহার করে ইভেন্ট ট্রিগার করা

ওয়েবসাইট পরিদর্শন করার সময় আমরা যে সবচেয়ে সাধারণ ক্রিয়া করি তা হল মাউস ক্লিক! ক্লিক করা একটি ওয়েবসাইট বা অ্যাপের জন্য সবচেয়ে গুরুত্বপূর্ণ অ্যাকশনগুলির এক। আপনি ওয়েবসাইট নেভিগেট করার সময় এবং কার্টে পণ্য যোগ করার সময় এটি করেন।

কতটা ভালো হত যদি আমরা জানতে পারি যে ব্যবহারকারী পৃষ্ঠায় কোন নির্দিষ্ট উপাদানে ক্লিক করেছে? তখন আমরা এই আচরণের চারপাশে ব্যবহারকারীর অভিজ্ঞতা তৈরি করতে পারতাম।

এখানে আসে jQuery click() মেথড। মাত্র কয়েক লাইন কোডে আমরা ব্যবহারকারী মাউস ক্লিক করলে একটি ইভেন্ট ট্রিগার করতে পারি। এই মেথডটি একটি jQuery সিলেক্টরে কল করা হয় এবং একটি কলব্যাক ফাংশন আর্গুমেন্ট হিসেবে নেয়। click() মেথড যেকোনো সময় মাউস ক্লিক ইভেন্ট শনাক্ত করলে কলব্যাক ফাংশনটি এক্সিকিউট হয়।

jQuery click() ব্যবহার করা

নিচের উদাহরণে আমরা একটি HTML বাটন রেন্ডার করব এবং বাটনে ক্লিক করলে পৃষ্ঠায় টেক্সট যোগ করব। click() মেথডটি পৃষ্ঠার যেকোনো উপাদানে যুক্ত করা যেতে পারে, তবে বাটনে এটি যুক্ত করা সবচেয়ে সাধারণ:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="main">
  <button id="btn-primary"> Click Me! </button>
  <p class="new-content"> </p>
</div>

উপরের কোডটি "main" আইডি 가진 একটি <div> এর ভিতরে "btn-primary" আইডি 가진 একটি বেসিক বাটন রেন্ডার করে। এই উদাহরণের লক্ষ্য হল বাটনে ক্লিক করার পর "new-content" ক্লাস 가진 <p> ট্যাগে নতুন কন্টেন্ট প্রদর্শন করা।

আমাদের jQuery কোডকে <script> ট্যাগের ভিতরে রাখলে নিচের কোডটি পাওয়া যায়:

<script>
$('#btn-primary').click(() => {
  $('.new-content').html("Button Clicked!")
})
</script>

এখন click() মেথডটি বাটনের আইডির সাথে সংযুক্ত এবং আর্গুমেন্ট হিসেবে একটি কলব্যাক ফাংশন নিচ্ছে। কলব্যাক ফাংশনটি একটি অ্যানোনিমাস ফাংশন যা "Button Clicked!" স্ট্রিংটি <p> ট্যাগের ভিতরে HTML হিসেবে রিটার্ন করে। কোডটি কী রেন্ডার করে তা দেখার আগে, আসুন অ্যানোনিমাস ফাংশন সম্পর্কে জানি।

অ্যানোনিমাস ফাংশন হলো একটি নামহীন ফাংশন। এর সাধারণ ব্যবহার হলো একটি মেথডের আর্গুমেন্ট হিসেবে কলব্যাক হিসেবে ব্যবহার করা। কলব্যাক মেথড এবং অ্যানোনিমাস ফাংশন রেসপন্সিভ ওয়েবসাইট এবং অ্যাপ তৈরির ভিত্তি।

আমরা কিছু জাভাস্ক্রিপ্ট বেসিক পর্যালোচনা করেছি, এখন দেখি উপরের কোডটি কী আউটপুট দিচ্ছে। "main" <div> এর ভিতরের বাটন দিয়ে শুরু করি:

ইভেন্ট হ্যান্ডলার বাটনে ক্লিক করলে কলব্যাক ফাংশনটি কল করবে কারণ আমরা click() মেথডটি বাটন সিলেক্টরের সাথে সংযুক্ত করেছি। এর ফলে "Button Clicked" স্ট্রিংটি বাটনের নিচে প্রদর্শিত হবে।

লক্ষ্য করুন যেহেতু আমরা jQuery html() মেথড ব্যবহার করেছি, কন্টেন্টটি শুধু একবার রেন্ডার হয়। আপনি বাটনটি অনেকবার ক্লিক করলেও, <p> এলিমেন্টের কন্টেন্ট শুধু একবার দেখাবে। যদি আপনি প্রতিবার ক্লিক করলে স্ট্রিংটি যোগ করতে চান, তবে html() এর পরিবর্তে append() ব্যবহার করতে পারেন:

<script>
$('#btn-primary').click(() => {
  $('.new-content').append("Button Clicked!")
})
</script>

বাটনটি তিনবার ক্লিক করলে আমাদের স্ট্রিং "new content" <p> ট্যাগে তিনবার যোগ হবে:

এটি কলব্যাক ফাংশনটি প্রতিবার বাটন ক্লিক করলে কল হচ্ছে তার একটি উদাহরণ। আপনি কোড লিখতে এগিয়ে যাওয়ার সাথে সাথে বুঝতে পারবেন যে jQuery click() মেথডটি একটি আকর্ষণীয় ব্যবহারকারীর অভিজ্ঞতা তৈরি করার জন্য কতটা গুরুত্বপূর্ণ।

উপসংহার

এই আর্টিকেলে আমরা জ্ঞ“कরে jQuery click() মেথডটি কী, এটি কী করে, এবং এটি সাধারণত কোথায় পাওয়া যায় তা আলোচনা করেছি। আমরা একটি উদাহরণ দেখেছি যেখানে click() একটি বাটনের সাথে সংযুক্ত করা হয়েছে এবং বাটনে ক্লিক করার পর নতুন কন্টেন্ট একবার বা একাধিকবার প্রদর্শন করা হয়েছে।

jQuery click() মেথডটি একটি ওয়েব পৃষ্ঠা বা অ্যাপের কার্যকারিতা তৈরি করার একটি শক্তিশালী উপায়, যেখানে কোডটি মাত্র কয়েক লাইনে সীমাবদ্ধ থাকে। click() কে বাটন ছাড়া অন্যান্য উপাদানlerle সংযুক্ত করে দেখুন কী হয়!