.On ('ক্লিক') বনাম .ক্লিক () এর মধ্যে পার্থক্য
উত্তর:
আমি মনে করি, পার্থক্যটি ব্যবহারের ধরণে রয়েছে।
আমি পছন্দ করেন .onবেশি .clickকারণ সাবেক পারেন পরিবর্তনশীল যোগ উপাদানের জন্য কম মেমরি এবং কাজ ব্যবহার করুন।
নিম্নলিখিত এইচটিএমএল বিবেচনা করুন:
<html>
<button id="add">Add new</button>
<div id="container">
<button class="alert">alert!</button>
</div>
</html>যেখানে আমরা নতুন বোতাম যুক্ত করি
$("button#add").click(function() {
var html = "<button class='alert'>Alert!</button>";
$("button.alert:last").parent().append(html);
});এবং "সতর্কতা!" একটি সতর্কতা প্রদর্শন করতে। আমরা এর জন্য "ক্লিক" বা "চালু" ব্যবহার করতে পারি।
আমরা যখন ব্যবহার করি click
$("button.alert").click(function() {
alert(1);
});উপরের সাথে, নির্বাচকের সাথে মেলে এমন প্রতিটি উপাদানগুলির জন্য একটি পৃথক হ্যান্ডলার তৈরি হয় । এর মানে
- অনেক মিলকারী উপাদানগুলি অনেকগুলি অভিন্ন হ্যান্ডলার তৈরি করতে পারে এবং এইভাবে মেমরির পদচিহ্নগুলি বাড়িয়ে তোলে
- গতিশীলভাবে যুক্ত আইটেমগুলির হ্যান্ডলারটি থাকবে না - যেমন, উপরের এইচটিএমএল এ নতুন যুক্ত হওয়া "সতর্কতা!" আপনি হ্যান্ডলারটি পুনরায় ফিরিয়ে না দিলে বোতামগুলি কাজ করবে না।
আমরা যখন ব্যবহার করি .on
$("div#container").on('click', 'button.alert', function() {
alert(1);
});উপরের সাথে, গতিশীলভাবে তৈরি হওয়াগুলি সহ আপনার নির্বাচকের সাথে মেলে এমন সমস্ত উপাদানগুলির একটি একক হ্যান্ডলার ।
... ব্যবহারের আর একটি কারণ .on
অ্যাড্রিন যেমন নীচে মন্তব্য করেছেন, ব্যবহারের আরেকটি কারণ .onহ'ল নাম স্পিড ইভেন্ট।
আপনি যদি কোনও হ্যান্ডলার যুক্ত করেন তবে .on("click", handler)সাধারনত এটি সরিয়ে .off("click", handler)ফেলুন যা খুব হ্যান্ডলারটিকে সরিয়ে ফেলবে। স্পষ্টতই এটি কাজ করে যদি আপনার ফাংশনটির কোনও রেফারেন্স থাকে তবে আপনি যদি না করেন তবে কী করবেন? আপনি নাম স্থান ব্যবহার করুন:
$("#element").on("click.someNamespace", function() { console.log("anonymous!"); });আনবাইন্ডিংয়ের মাধ্যমে
$("#element").off("click.someNamespace");on('click' ...)দেখুন stackoverflow.com/a/3973060/759452 অর্থাত। on('click.darkenallothersections' ...)এবং একই সাথে থাকতে পারে on('click.displaynextstep' ...), তবে আমি বেছে বেছে কেবল তার ব্যবহারটি বন্ধ করতে পারি.unbind('click.displaynextstep')
on()jQuery মধ্যে প্রবণতা হয়। আমি jQuery 3 এ আপগ্রেড $(window).load(function() {});করার $(window).on("load", function (e) {})সময় আমাকে আপডেট করতে হয়েছিল
নিম্নলিখিত কোডের মধ্যে কোনও পার্থক্য আছে কি?
না, আপনার প্রশ্নের দুটি কোড নমুনার মধ্যে কোনও কার্যকরী পার্থক্য নেই। .click(fn)এটি একটি "শর্টকাট পদ্ধতি" .on("click", fn)। এর জন্য ডকুমেন্টেশন থেকে.on() :
কিছু ইভেন্টের শর্টহ্যান্ড পদ্ধতি রয়েছে যেমন
.click()ইভেন্ট হ্যান্ডলারদের সংযুক্ত বা ট্রিগার করতে ব্যবহার করা যেতে পারে। শর্টহ্যান্ড পদ্ধতির সম্পূর্ণ তালিকার জন্য ইভেন্টের বিভাগটি দেখুন ।
দ্রষ্টব্য যে এটির .on()থেকে পৃথক .click()যে এটিতে প্যারামিটারটি পাস করে প্রতিনিধি ইভেন্ট হ্যান্ডলারগুলি তৈরি করার ক্ষমতা রয়েছে selector, যেখানে .click()তা নেই। যখন প্যারামিটার .on()ছাড়াই ডাকা হয় selector, এটি ঠিক একইরকম আচরণ করে .click()। আপনি যদি ইভেন্ট প্রতিনিধি চান, ব্যবহার করুন .on()।
selector। আপনি যদি .on()কোনও selectorপরামিতি ছাড়াই কল করেন তবে ব্যবহারের চেয়ে কোনও কার্যকারিতা উন্নতি হবে না .click()।
.on()jQuery 1.7 হিসাবে আপনার সমস্ত ইভেন্টের বাইন্ডিং করার প্রস্তাবিত উপায়। এটি উভয়ের সমস্ত কার্যকারিতা রোল করে .bind()এবং .live()একটি ফাংশনে রূপান্তর করে যা আপনি বিভিন্ন পরামিতিগুলি পাস করার সাথে সাথে আচরণকে পরিবর্তিত করে।
যেমন আপনি আপনার উদাহরণ লিখেছেন, দুজনের মধ্যে কোনও পার্থক্য নেই। উভয়ই clickইভেন্টটির সাথে একজন হ্যান্ডলারের সাথে আবদ্ধ #whatever। on()আপনি #whateverযদি চয়ন করেন তবে আপনাকে একক হ্যান্ডলার ফাংশনে বাচ্চাদের দ্বারা বরখাস্ত করা ইভেন্টগুলি ডেলিট করার অনুমতি দেওয়ার ক্ষেত্রে অতিরিক্ত নমনীয়তা সরবরাহ করে ।
// Bind to all links inside #whatever, even new ones created later.
$('#whatever').on('click', 'a', function() { ... });.live()তাই না? এছাড়াও, এটি অন্যান্য উত্তরের সাথে বিরোধী বলে মনে হচ্ছে যা বলে যে এটির কেবল কার্যকারিতা রয়েছে .click()এবং তাই ভবিষ্যতের ইভেন্টগুলিতে প্রযোজ্য নয়।
.on()কি করতে .click()পারে এবং কী করতে পারে .bind()এবং .live()করতে পারে - এটি আপনাকে কোন পরামিতিগুলির সাথে কল করে তা নির্ভর করে। (কিছু অন্যান্য উত্তরও এর উল্লেখ করেছে)) তবে মনে রাখবেন যে "# যা কিছু ভিতরে সমস্ত লিঙ্কে বাঁধা" কী তা নয়.live() , এটি কী .delegate()করে। আপনাকে ধারক নির্দিষ্ট করার পরিবর্তে .live()সমস্ত ভিতরে আবদ্ধ হয় document। নোট এছাড়াও .live()jQuery 1.7 থেকে অবচয় করা হয়।
অন্যান্য উত্তর দ্বারা উল্লিখিত:
$("#whatever").click(function(){ });
// is just a shortcut for
$("#whatever").on("click", function(){ })যদিও এটি .on()বেশ কয়েকটি অন্যান্য প্যারামিটার সংমিশ্রণগুলিকে সমর্থন .click()করে যা এটির নয়, এটি ইভেন্টের প্রতিনিধি (সুপারসিডিং .delegate()এবং .live()) পরিচালনা করতে দেয় ।
(এবং স্পষ্টতই "কীআপ", "ফোকাস" ইত্যাদির জন্য অনুরূপ অন্যান্য শর্টকাট পদ্ধতি রয়েছে)
আমি অতিরিক্ত উত্তর পোস্ট করার কারণটি হল আপনি যদি .click()কোনও পরামিতি না দিয়ে কল করেন তবে কী ঘটে তা উল্লেখ করা:
$("#whatever").click();
// is a shortcut for
$("#whatever").trigger("click");লক্ষণীয় যে আপনি যদি .trigger()সরাসরি ব্যবহার করেন তবে আপনি অতিরিক্ত পরামিতি বা একটি jQuery ইভেন্ট অবজেক্টও পাস করতে পারেন, যা আপনি করতে পারবেন না .click()।
আমি আরও উল্লেখ করতে চেয়েছিলাম যে আপনি jQuery উত্স কোডটি (jquery-1.7.1.js তে) দেখলে আপনি দেখতে পাবেন যে অভ্যন্তরীণভাবে .click()(বা .keyup(), ইত্যাদি) ফাংশনটি আসলে কল করবে .on()বা .trigger()। স্পষ্টতই এর অর্থ হ'ল আপনি নিশ্চিত হয়ে উঠতে পারেন যে তাদের সত্যই একই ফল রয়েছে, তবে এর অর্থ হ'ল ব্যবহারের .click()ফলে সামান্য কিছুটা ওভারহেড রয়েছে - বেশিরভাগ পরিস্থিতিতে উদ্বেগ বা এমনকি চিন্তা করার মতো কিছু নয় তবে তাত্ত্বিকভাবে এটি অসাধারণ পরিস্থিতিতে গুরুত্বপূর্ণ হতে পারে।
সম্পাদনা: পরিশেষে, নোট করুন যা .on()আপনাকে একই লাইনে একাধিক ইভেন্টকে একই ফাংশনে আবদ্ধ করতে দেয়, যেমন:
$("#whatever").on("click keypress focus", function(){});.click()))
তারা একই হিসাবে উপস্থিত হয় ... ক্লিক () ফাংশন থেকে ডকুমেন্টেশন :
এই পদ্ধতিটি .bind ('ক্লিক করুন', হ্যান্ডলার) এর শর্টকাট is
() ফাংশন থেকে ডকুমেন্টেশন :
JQuery 1.7 হিসাবে, .on () পদ্ধতি ইভেন্ট হ্যান্ডলার সংযুক্ত করার জন্য প্রয়োজনীয় সমস্ত কার্যকারিতা সরবরাহ করে। পুরানো jQuery ইভেন্ট পদ্ধতি থেকে রূপান্তর করতে সহায়তার জন্য .bind (), .delegate () এবং .live () দেখুন। .On () এর সাথে আবদ্ধ ইভেন্টগুলি সরাতে, ওফ () দেখুন।
.clickবনাম.on
.click ইভেন্টগুলি কেবলমাত্র যখন উপাদানটি রেন্ডার হয়ে যায় এবং কেবলমাত্র ডিওএম প্রস্তুত হলে লোড হওয়া উপাদানের সাথে সংযুক্ত থাকে events
.on ইভেন্টগুলি ডোম উপাদানগুলির সাথে ডায়নামিকভাবে সংযুক্ত থাকে, আপনি যখন ডওম উপাদানগুলির সাথে একটি ইভেন্ট সংযুক্ত করতে চান যা এজ্যাক্স অনুরোধ বা অন্য কোনও কিছুতে (ডিওএম প্রস্তুত হওয়ার পরে) রেন্ডার করা কার্যকর হয়।
এখানে আপনি ক্লিক ইভেন্ট প্রয়োগের বিভিন্ন উপায়ের তালিকা পাবেন। আপনি সেই অনুযায়ী উপযুক্ত হিসাবে বেছে নিতে পারেন বা যদি আপনার ক্লিকটি কাজ না করে থাকে তবে এগুলির মধ্যে একটি বিকল্প চেষ্টা করুন try
$('.clickHere').click(function(){
// this is flat click. this event will be attatched
//to element if element is available in
//dom at the time when JS loaded.
// do your stuff
});
$('.clickHere').on('click', function(){
// same as first one
// do your stuff
})
$(document).on('click', '.clickHere', function(){
// this is diffrent type
// of click. The click will be registered on document when JS
// loaded and will delegate to the '.clickHere ' element. This is
// called event delegation
// do your stuff
});
$('body').on('click', '.clickHere', function(){
// This is same as 3rd
// point. Here we used body instead of document/
// do your stuff
});
$('.clickHere').off().on('click', function(){ //
// deregister event listener if any and register the event again. This
// prevents the duplicate event resistration on same element.
// do your stuff
})যতক্ষণ না ইন্টারনেট এবং কিছু বন্ধু থেকে দূরে থাকা .on () ব্যবহৃত হয় যখন আপনি গতিশীলভাবে উপাদান যুক্ত করেন। তবে যখন আমি এটি একটি সাধারণ লগইন পৃষ্ঠায় ব্যবহার করি যেখানে ক্লিক ইভেন্টের AJAX প্রেরণ করা উচিত নোড.জেজে এবং ফিরতি নতুন উপাদান যুক্ত করা উচিত এটি মাল্টি-এজেএক্স কলগুলি কল করতে শুরু করে। আমি যখন এটিকে পরিবর্তন করেছি তখন ক্লিক করতে () সবকিছু ঠিক হয়ে গেছে। আসলে আমি আগে এই সমস্যার মুখোমুখি হই নি।
নতুন উপাদানসমূহ
সমালোচিত পয়েন্টগুলি হাইলাইট করার জন্য উপরের বিস্তৃত উত্তরের সংযোজন হিসাবে আপনি যদি নতুন উপাদানগুলির সাথে ক্লিক করতে চান তবে:
- প্রথম নির্বাচক দ্বারা নির্বাচিত উপাদানগুলি যেমন $ ("বডি") অবশ্যই ঘোষণার সময় উপস্থিত থাকতে হবে অন্যথায় সংযুক্ত করার মতো কিছুই নেই।
- আপনার লক্ষ্য উপাদানগুলির জন্য দ্বিতীয় যুক্তি হিসাবে বৈধ নির্বাচনকারী সহ .on () ফাংশনে আপনাকে অবশ্যই তিনটি আর্গুমেন্ট ব্যবহার করতে হবে।
$('.UPDATE').click(function(){ }); **V/S**
$(document).on('click','.UPDATE',function(){ });
$(document).on('click','.UPDATE',function(){ });- এটি তখন আরও কার্যকর $ ('। আপডেট') 'ক্লিক করুন (ফাংশন () {});
- এটি কম স্মৃতি ব্যবহার করতে পারে এবং গতিযুক্ত যুক্ত উপাদানগুলির জন্য কাজ করতে পারে।
- সম্পাদনা এবং মুছে ফেলা বোতামের সাথে কিছু সময় গতিশীল ফিচার ডেটা সম্পাদনা করার সময় জিকুয়ের ইভেন্ট তৈরি করে না বা ফর্মের সারি ডেটার ডেটা মুছে ফেলা হয়, সেই সময়টি
$(document).on('click','.UPDATE',function(){ });jquery ব্যবহার করে কার্যকরভাবে একই ফ্যাচ করা ডেটার মতো কাজ করে। আপডেট বা মুছে ফেলার সময় বোতামটি কাজ করছে না:
