JQuery .live () এবং .on () এর মধ্যে পার্থক্য কী

Question

আমি দেখতে পাই .on()jQuery 1.7 এ একটি নতুন পদ্ধতি আছে যা .live()পূর্ববর্তী সংস্করণগুলিতে প্রতিস্থাপন করে ।

আমি তাদের মধ্যে পার্থক্যটি জানতে এবং এই নতুন পদ্ধতিটি ব্যবহার করে কী কী সুবিধা অর্জন করতে আগ্রহী তা জানতে আগ্রহী।

Answer 1

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

.Live () পদ্ধতির ব্যবহারের আর সুপারিশ করা হয় না কারণ জিকুয়েরির পরবর্তী সংস্করণগুলি আরও ভাল পদ্ধতিগুলির অফার করে যার ত্রুটি নেই। বিশেষত, .live () ব্যবহারের সাথে নিম্নলিখিত সমস্যাগুলি দেখা দেয়:

• jQuery .live()পদ্ধতিটি কল করার আগে নির্বাচক দ্বারা নির্দিষ্ট করা উপাদানগুলি পুনরুদ্ধার করার চেষ্টা করে , যা বড় নথিতে সময় সাপেক্ষ হতে পারে।
• চেইন পদ্ধতিগুলি সমর্থিত নয়। উদাহরণস্বরূপ, $("a").find(".offsite, .external").live( ... ); হয় না বৈধ এবং আশানুরূপ কাজ করে না।
• যেহেতু সমস্ত .live()ইভেন্ট documentউপাদানটিতে সংযুক্ত থাকে তাই ইভেন্টগুলি পরিচালনা করার আগে দীর্ঘতম এবং ধীরতম সম্ভাব্য পথ নেয়।
• event.stopPropagation() ইভেন্ট হ্যান্ডলারে কল করা ডকুমেন্টের সাথে সংযুক্ত ইভেন্ট হ্যান্ডলারদের থামাতে অকার্যকর; ইভেন্ট ইতিমধ্যে প্রচারিত হয়েছে document।
• .live()উপায়গুলির বিস্ময়কর হতে পারে, উদাঃ অন্যান্য ঘটনা পদ্ধতি পদ্ধতি মিথস্ক্রিয়া, $(document).unbind("click")সব ক্লিক কোনো কল দ্বারা সংযুক্ত হ্যান্ডেলার সরিয়ে ফেলা হবে .live()!

Comments

কেবল অবাক হচ্ছেন, যদি এটাই বিষয় হয় তবে কেন তারা পদ্ধতিতে নতুন তৈরি করার পরিবর্তে লাইভ পদ্ধতির উন্নতি করবেন না। কিছু না থাকলে লাইভ কিছু করতে পারে তবে কি না?

— নিওবি

@ নোবি, এটি আপনার কোডটিকে আরও অর্থবহ করে তোলার জন্য, এবং অভিন্নতা রয়েছে

— ওম শঙ্কর

@ নোবি: আমি ধারণা করি এটি পিছনের সামঞ্জস্য বজায় রাখবে। এই উত্তরে বর্ণিত পার্থক্যগুলি দেখায় যে কীভাবে তাদের আচরণ কিছুটা আলাদা। live()এর আচরণটি যদি সংশোধন করা হয় তবে on()এটি বিদ্যমান কোডটি ভেঙে দিতে পারে। JQuery লোকেরা দেখিয়েছে যে তারা লিগ্যাসি কোডটি "ভঙ্গ" করার জন্য অগত্যা ভয় পান না, তবে আমি মনে করি এই ক্ষেত্রে, তারা সিদ্ধান্ত নিয়েছে যে প্রবণতাগুলি প্রবর্তনের ঝুঁকি না রাখাই বুদ্ধিমান।

— রিনোগো

দেখে মনে হচ্ছে এমন ঘটনা। live()১.7 এ অবমানিত হয়েছিল এবং ১.৯ সালে সরানো হয়েছিল। api.jquery.com/live

— রিনোগো

Answer 2

এক পার্থক্য যে মানুষ যখন থেকে সরানোর উপর পদস্খলন .live()থেকে .on()যে জন্য পরামিতি হয় .on()কিছুটা ভিন্ন যখন করে DOM থেকে পরিবর্তনশীল যোগ উপাদান ঘটনা বাঁধাই হয়।

.live()পদ্ধতিটির সাথে আমরা যে সিনট্যাক্সটি ব্যবহার করতাম তার উদাহরণ এখানে রয়েছে :

$('button').live('click', doSomething);

function doSomething() {
    // do something
}

এখন .live()jQuery সংস্করণ 1.7 এ অবমূল্যায়ন এবং সংস্করণ 1.9 এ সরানো হয়েছে, আপনার .on()পদ্ধতিটি ব্যবহার করা উচিত । .on()পদ্ধতিটি ব্যবহার করে এখানে একটি সমতুল উদাহরণ :

$(document).on('click', 'button', doSomething);

function doSomething() {
    // do something
}

দয়া করে নোট করুন যে আমরা .on()বোতামটি বোতামের চেয়ে ডকুমেন্টের বিরুদ্ধে ডাকছি । আমরা উপাদানটির জন্য নির্বাচককে নির্দিষ্ট করি যার ইভেন্টগুলি আমরা দ্বিতীয় প্যারামিটারে শুনছি।

উপরের উদাহরণে, আমি .on()দস্তাবেজটিতে কল করছি , তবে আপনি যদি আপনার নির্বাচকের কাছাকাছি কোনও উপাদান ব্যবহার করেন তবে আপনি আরও ভাল পারফরম্যান্স পাবেন। কোনও পূর্বসূরীর উপাদান এতক্ষণ কাজ করবে যতক্ষণ না এটি কল করার আগে পাতায় বিদ্যমান .on()।

এটি ডকুমেন্টেশনে এখানে ব্যাখ্যা করা হয়েছে তবে এটি মিস করা বেশ সহজ।

Answer 3

দেখুন অফিসিয়াল ব্লগ

[..] নতুন .on () এবং .Off () এপিআইগুলি jQuery এর কোনও দস্তাবেজের সাথে ইভেন্টগুলি সংযুক্ত করার সমস্ত উপায়কে একীভূত করে - এবং সেগুলি টাইপ করার জন্য আরও খাটো! [...]

Answer 4

.live()

এই পদ্ধতিটি বর্তমান উপাদান বা এখন এবং ভবিষ্যতে মিলিত সমস্ত উপাদানগুলির জন্য ইভেন্ট হ্যান্ডলার সংযুক্ত করতে ব্যবহৃত হয়।

$( "#someid" ).live( "click", function() {
  console.log("live event.");
});

এবং

.on()

এই পদ্ধতিটি নীচে নির্বাচিত উপাদানগুলির সাথে এক বা একাধিক ইভেন্টের জন্য ইভেন্ট হ্যান্ডলার ফাংশন সংযুক্ত করতে ব্যবহৃত হয় এটির উদাহরণ।

$( "#someid" ).on( "click", function() {
  console.log("on event.");
});

Answer 5

বনাম লাইভের মধ্যে পার্থক্য সম্পর্কে ভাল টিউটোরিয়াল

উপরের লিঙ্ক থেকে উদ্ধৃতি

.Live () এর সাথে কী দোষ রয়েছে

.Live () পদ্ধতির ব্যবহারের আর সুপারিশ করা হয় না কারণ জিকুয়েরির পরবর্তী সংস্করণগুলি আরও ভাল পদ্ধতিগুলির অফার করে যার ত্রুটি নেই। বিশেষত, .live () ব্যবহারের সাথে নিম্নলিখিত সমস্যাগুলি দেখা দেয়:

1. জকিউয়ারি .live () পদ্ধতিটি কল করার আগে নির্বাচক দ্বারা নির্দিষ্ট করা উপাদানগুলি পুনরুদ্ধার করার চেষ্টা করে, যা বড় নথিতে সময় সাপেক্ষ হতে পারে।
2. চেইন পদ্ধতিগুলি সমর্থিত নয়। উদাহরণস্বরূপ, $ ("ক")। সন্ধান করুন ("। অফসাইট,। বহিরাগত")। লাইভ (…); বৈধ নয় এবং প্রত্যাশার মতো কাজ করে না।
3. যেহেতু সমস্ত .live () ইভেন্টগুলি নথির উপাদানগুলিতে সংযুক্ত থাকে, তাই ইভেন্টগুলি পরিচালনা করার আগে দীর্ঘতম এবং ধীরতম সম্ভাব্য পাথ নেয়।
4. ইভেন্ট হ্যান্ডলারে ইভেন্ট.স্টপপ্রপাগেশন () কল করা ডকুমেন্টের সাথে সংযুক্ত ইভেন্ট হ্যান্ডলারদের থামাতে অকার্যকর; ইভেন্টটি ইতিমধ্যে নথিতে প্রচার করেছে।
5. .Live () পদ্ধতিটি অন্যান্য ইভেন্টের পদ্ধতির সাথে এমনভাবে যোগাযোগ করে যা আশ্চর্যজনক হতে পারে, উদাহরণস্বরূপ, $ (দস্তাবেজ) .উনবাইন্ড ("ক্লিক করুন") .live () এ কোনও কল দ্বারা সংযুক্ত সমস্ত ক্লিক হ্যান্ডলারগুলি সরিয়ে দেয়!

Answer 6

আরও তথ্যের জন্য এটি পরীক্ষা করে দেখুন .. লাইভ () এবং .on ()

আপনি যখন সামগ্রীর গতিশীল প্রজন্মের সাথে ডিল করেন তখন লাইভ () পদ্ধতিটি ব্যবহার করা হয় ... যেমন আমি প্রোগ্রামে তৈরি করেছি যা যখন আমি একটি জ্যাকুরি স্লাইডারের মান পরিবর্তন করি তখন আমি একটি ট্যাব যুক্ত করি এবং আমি প্রতিটি ট্যাবগুলিতে ক্লোজ বোতামের কার্যকারিতা সংযুক্ত করতে চাই যা উত্পন্ন হবে ... আমি চেষ্টা করেছি কোডটি হল ..

var tabs = $('#tabs').tabs();
                                        // live() methos attaches an event handler for all
                                        //elements which matches the curren selector
        $( "#tabs span.ui-icon-close" ).live( "click", function() {


            // fetches the panelId attribute aria-control which is like tab1 or vice versa
            var panelId = $( this  ).closest( "li" ).remove().attr( "aria-controls" );
            $( "#" + panelId ).remove();
            tabs.tabs( "refresh" );
        });

এবং এটি প্রাকটি দশটি দুর্দান্ত কাজ করে ...

Comments

তাই আপনাকে স্বাগতম। আনন্দ আপনার উত্তরগুলি বিস্তারিতভাবে জানার চেষ্টা করুন এবং কেবল লিঙ্ক সরবরাহ করবেন না, লিঙ্ক-কেবল উত্তরগুলি এখানে খারাপ অনুশীলন হিসাবে বিবেচিত হয়।

— মাতা

ধন্যবাদ .. আমি ভবিষ্যতের উত্তরের জন্য এটি আমার মনে রাখব .. :)

— হিরেন

Answer 7

আমি একটি ক্রোম এক্সটেনশান "কমেন্ট সেভ" এর লেখক যা jQuery ব্যবহার করে এবং যেটি ব্যবহার করে .live()। এক্সটেনশনটি যেভাবে কাজ করে তা হ'ল শ্রোতার সাথে সমস্ত পাঠ্য ব্যবহার করে সংযুক্ত করে। live()- এটি যখনই দস্তাবেজ বদলে যায় তখনও এটি শ্রোতাদের সমস্ত নতুন পাঠ্যের সাথে যুক্ত করে well

আমি চলে এসেছি .on()তবে এটি তেমন কাজ করে না। যখনই দস্তাবেজটি পরিবর্তন হয় এটি শ্রোতাদের সংযুক্ত করে না - তাই আমি আবার ব্যবহারে ফিরে এসেছি .live()। এটি একটি বাগ যা আমি অনুমান করি .on()। আমি এটি অনুমান করি ঠিক সে সম্পর্কে সাবধানতা অবলম্বন করুন।

Comments

আপনি এটি অবশ্যই ভুল ব্যবহার করছেন - এটির .live()পদ্ধতিতে কিছুটা আলাদা সিনট্যাক্স রয়েছে । সমতুল্য .on()জন্য $('p').live('click', function () { alert('clicked'); });হয় $(document).on('click', 'p', function () { alert('clicked'); });। মনে রাখবেন যে আপনি .on()পদ্ধতিটি ব্যবহার করেছেন documentএবং তারপরে ইভেন্টের হ্যান্ডলারটি তার দ্বিতীয় প্যারামিটারে শুনতে আপনি যে উপাদানটি সংযুক্ত করতে চান তা নির্দিষ্ট করুন specify

— আজবাইভেন 4'13

আপনি এখানে আরও পড়তে পারেন: api.jquery.com/on । প্রত্যক্ষ এবং প্রতিনিধি অনুষ্ঠানগুলির

— ই

আমি এই নিবন্ধটি পড়ার পরামর্শ দিচ্ছি: elijahmanor.com/2012/02/…

— আজবিয়েন

আমরা $ (সিলেক্টর 1 )ও করতে পারি .অন (ইভেন্ট, সিলেক্টর 2, ফাংশন) যেখানে সিলেক্টর 1 পিতা বা মাতা এবং নির্বাচক 2 নির্বাচক 1 এর সন্তান। আপনাকে পুরো ডকুমেন্টটি অনুসন্ধান করতে হবে না বলে এটি অনুসন্ধানের ক্ষেত্রটিকে ছোট করে।

— রামশরণ

@ আজও আপনার প্রথম মন্তব্যটি এখানে একটি উত্তরে পরিণত করা উচিত (আমি এখানে পৌঁছানোর সময় এটিই আমি খুঁজছিলাম)।

— atwright147

Answer 8

ব্রাউজার বন্ধ হওয়া ইভেন্টটি সনাক্ত করার জন্য আমার একটি প্রয়োজন রয়েছে। গবেষণা করার পরে আমি jQuery 1.8.3 ব্যবহার করে নিম্নলিখিতটি করছি

1. হাইপারলিঙ্ক ক্লিক করা হলে নিম্নলিখিত jQuery ব্যবহার করে একটি পতাকা চালু করুন

   $ ('a')। লাইভ ('ক্লিক', ফাংশন () {ক্লিনসেশন = মিথ্যা;});

2. জমা দেওয়ার যে কোনও সময় ইনপুট বোতামের ধরণের ক্লিক করা হলে নিম্নলিখিত jQuery ব্যবহার করে একটি পতাকা চালু করুন

$ ("ইনপুট [টাইপ = জমা করুন]") লাইভ ('ক্লিক', ফাংশন () {সতর্কতা ('ইনপুট বোতাম ক্লিক করেছে'); ক্লিনসেশন = মিথ্যা;});

1. যে কোনও সময় ফর্ম জমা পড়লে নিম্নলিখিত jQuery ব্যবহার করে একটি পতাকা চালু করুন

$ ('ফর্ম')। লাইভ ('জমা', ফাংশন () {ক্লিনসেশন = মিথ্যা;});

এখন গুরুত্বপূর্ণ বিষয় ... আমার সমাধান কেবল তখনই কাজ করে যদি আমি .l পরিবর্তে লাইভ ব্যবহার করি। যদি আমি .on ব্যবহার করি তবে ফর্মটি জমা দেওয়ার পরে ইভেন্টটি বরখাস্ত হয়ে যায় এবং যা খুব দেরিতে। জাভাস্ক্রিপ্ট কল ব্যবহার করে আমার ফর্মগুলি বেশ কয়েকবার জমা হয়ে যায় (ডকুমেন্ট.ফোর্ড.সাম্বিত)

সুতরাং লাইভ এবং .on এর মধ্যে একটি মূল পার্থক্য রয়েছে। আপনি যদি লাইভ ব্যবহার করেন তবে আপনার ইভেন্টগুলি তাত্ক্ষণিকভাবে বরখাস্ত হয়ে যাবে তবে আপনি .অনু পরিবর্তন করতে গেলে এটি সময়মতো বরখাস্ত হয় না

Comments

এটি সত্য নয়, আপনি অবশ্যই .onভুলভাবে ব্যবহার করছেন বা আপনার কোডের অন্য কোনও কিছু ঘটছে এর কারণ করছে। আপনার .onপদ্ধতির জন্য আপনার কোডটি সম্ভবত পেস্ট করুন ।

— আজবিওয়েন

হ্যাঁ এটি সত্য নয়। .on () .live () এর উন্নত সংস্করণ। সুতরাং, আপনার কোড এখানে পেস্ট করুন। যাতে আমাদের কিছু স্পষ্টতা থাকবে

— রেকলেস সার্জিও