`অন` এবং` লাইভ` বা `বিন্দুর মধ্যে পার্থক্য কী?

172

JQuery v1.7 এ একটি নতুন পদ্ধতি onযুক্ত করা হয়েছিল। ডকুমেন্টেশন থেকে:

'.On () পদ্ধতিটি ইভেন্টের হ্যান্ডলারগুলিকে jQuery অবজেক্টের বর্তমানে নির্বাচিত উপাদানগুলির সেটগুলিতে সংযুক্ত করে। JQuery 1.7 হিসাবে, .on () পদ্ধতি ইভেন্ট হ্যান্ডলার সংযুক্ত করার জন্য প্রয়োজনীয় সমস্ত কার্যকারিতা সরবরাহ করে ''

সঙ্গে পার্থক্য কি liveএবং bind?

jquery

— দিয়েগো
সূত্র

5

সম্পর্কিত : jQuery .live () এবং .on () এর মধ্যে পার্থক্য কী

— ফেলিক্স ক্লিং

জিজ্ঞাসা করার আগে এরকম কিছু সন্ধান করেছিলাম এবং সফল হয়নি। ধন্যবাদ!

— দিয়েগো

329

on()jQuery এর ইভেন্ট বাইন্ডিং ফাংশনগুলির বেশিরভাগকে এক করে দেওয়ার চেষ্টা। এটি liveবনাম সহ অদক্ষতাগুলিকে পরিশ্রম করার যুক্ত বোনাস পেয়েছে delegate। ভবিষ্যতে jQuery এর সংস্করণগুলিতে, এই পদ্ধতিগুলি সরানো হবে এবং কেবল onএবং oneবাকি থাকবে।

উদাহরণ:

// Using live()
$(".mySelector").live("click", fn);

// Equivalent `on` (there isn't an exact equivalent, but with good reason)
$(document).on("click", ".mySelector", fn);

// Using bind()
$(".mySelector").bind("click", fn);

// Equivalent `on`
$(".mySelector").on("click", fn);

// Using delegate()
$(document.body).delegate(".mySelector", "click", fn);

// Equivalent `on`
$(document.body).on("click", ".mySelector", fn);

অভ্যন্তরীণভাবে, jQuery এই সমস্ত পদ্ধতি এবং শর্টহ্যান্ড ইভেন্ট হ্যান্ডলার সেটারগুলিকে পদ্ধতিতে মানচিত্র করে on(), আরও নির্দেশ করে যে আপনার এখন থেকে এই পদ্ধতিগুলি উপেক্ষা করা উচিত এবং কেবল ব্যবহার করুন on:

bind: function( types, data, fn ) {
    return this.on( types, null, data, fn );
},
live: function( types, data, fn ) {
    jQuery( this.context ).on( types, this.selector, data, fn );
    return this;
},
delegate: function( selector, types, data, fn ) {
    return this.on( types, selector, data, fn );
},

Https://github.com/jquery/jquery/blob/1.7/src/event.js#L965 দেখুন ।

— অ্যান্ডি ই
সূত্র

@ জামা ওয়াফলস হিসাবে সবচেয়ে বোধগম্য উত্তর বলেছিলেন। আপনি দয়া করে উত্তরটি পূরণ করতে ও ডেলিগেটের মধ্যে তুলনা যুক্ত করবেন? ধন্যবাদ!

— দিয়েগো

LOLs, আপনি আমার আগে 4 সেকেন্ড jquery উত্স যোগ করেছেন: ডি বিটিডব্লিউ লাইভ সমতুল্য প্রসঙ্গটি নথি নয়, দস্তাবেজ নয়

— এসাইলাইজা

1

পরিবর্তে আপনি ১.7 ট্যাগটি উল্লেখ করতে চাইতে পারেন, অন্যথায় ভবিষ্যতে পরিবর্তনগুলি আপনার লিঙ্কটি অবৈধ করে তুলতে পারে (সঠিক অবস্থানের দিকে নির্দেশ করবে না): github.com/jquery/jquery/blob/1.7/src/event.js#L965

— ফেলিক্স ক্লিং

3

$(document.body).delegate("click", ".mySelector", fn);হওয়া উচিত$(document.body).delegate(".mySelector", "click", fn);

— সনি

2

@ এসডিএসডিএসডিএসডি, অফ আনবাইন্ড, আনলাইভ এবং অবমূল্যায়নের জেনেরিক রিপ্লেসমেন্ট হিসাবে কাজ করে।

— অ্যান্ডি ই

12

onপ্রকৃতির খুব কাছাকাছি delegate। তাহলে প্রতিনিধি ব্যবহার করবেন না কেন? এটা onএকা আসে না কারণ । আছে off, ইভেন্ট আনবাইন্ড করতে এবং oneএকটি ইভেন্ট শুধুমাত্র একবার কার্যকর করা হবে। এটি একটি নতুন ইভেন্টের "প্যাকেজ"।

এর প্রধান সমস্যাটি liveহ'ল এটি "উইন্ডো" এর সাথে সংযুক্ত থাকে, পৃষ্ঠার কাঠামোর (ডোম) গভীরে থাকা কোনও উপাদানটিতে ক্লিক ইভেন্ট (বা অন্যান্য ইভেন্ট) চাপিয়ে কোনও ইভেন্ট সন্ধানের জন্য পৃষ্ঠার শীর্ষে "বুদ্বুদ আপ" করতে বাধ্য হয় হ্যান্ডলার এটি মোকাবেলা করতে ইচ্ছুক। প্রতিটি স্তরে, সব ইভেন্ট হ্যান্ডলার চেক করা হবে, এই ফাস্ট পর্যন্ত যোগ করতে পারেন, আপনি গভীর imbrication না করেন ( <body><div><div><div><div><table><table><tbody><tr><td><div><div><div><ul><li><button> etc etc etc...)

সুতরাং, bindমত click, অন্যান্য শর্টকাট ঘটনা binders ঘটনা লক্ষ্য সরাসরি সংযুক্ত মত। আপনার যদি একটি সারণী থাকে তবে আসুন, 1000 লাইন এবং 100 কলাম এবং 100'000 কক্ষের প্রত্যেকটিতে একটি চেকবক্স থাকে যা আপনি হ্যান্ডেল করতে চান তা ক্লিক করে click 100'000 ইভেন্ট হ্যান্ডলার সংযুক্ত করে পৃষ্ঠা লোডে প্রচুর সময় লাগবে । টেবিল পর্যায়ে একটি একক ইভেন্ট তৈরি করা এবং ইভেন্টের প্রতিনিধি ব্যবহার করা হ'ল আরও কার্যকরতার কয়েকটি আদেশ orders ইভেন্টের নির্ধারিত সময়ে ইভেন্টের লক্ষ্য পুনরুদ্ধার করা হবে। " this" সারণী হবে, তবে কোনও ফাংশনে event.target" this" আপনার স্বাভাবিক " " clickহবে। এখন এর সাথে দুর্দান্ত জিনিসটি onহ'ল " this" সর্বদা ইভেন্টের লক্ষ্য হবে, এবং এটির সাথে সংযুক্ত কন্টেইনারটি নয়।

— roselan
সূত্র

প্রতিনিধি কি অনুন্নত আসেন না?

— ডেভওয়ালি

1

হা. ভাল দাগ আপনি প্রতিদিন শিখেন;) (আপনি ২০১১ সাল থেকে দস্তাবেজে ব্যাপক উন্নতি হয়েছে)

— রোজলান

5

সঙ্গে .onপদ্ধতি এটা কি সম্ভব .live, .delegateএবং .bindএকই ফাংশন কিন্তু .live()শুধুমাত্র .live()সম্ভাব্য (দস্তাবেজে ঘটনা প্রতিনিধিরূপে) করা হয়।

jQuery("#example").bind( "click", fn ) = jQuery( "#example").on( "click", fn );

jQuery("#example").delegate( ".examples", "click", fn ) = jQuery( "#example" ).on( "click", ".examples", fn )

jQuery("#example").live( fn ) = jQuery( document ).on( "click", "#example", fn )

আমি সরাসরি jQuery উত্স থেকে এটি নিশ্চিত করতে পারি:

bind: function( types, data, fn ) {
    return this.on( types, null, data, fn );
},

live: function( types, data, fn ) {
    jQuery( this.context ).on( types, this.selector, data, fn );
    return this;
},

delegate: function( selector, types, data, fn ) {
    return this.on( types, selector, data, fn );
},

jQuery (this.context)? this.context=== documentবেশিরভাগ ক্ষেত্রে

— Esailija
সূত্র

3

(প্রশ্নটি পরিবর্তনের আগে আমার খোলার বাক্যটি আরও অর্থবোধ করেছিল Orig মূলত আপনি "" এর সাথে কী পার্থক্য live? " বলেছিলেন )

onএটি তার delegateচেয়ে বেশি পছন্দ live, এটি মূলত একটি ifiedক্যবদ্ধ ফর্ম bindএবং delegate(প্রকৃতপক্ষে, দলটি বলেছে যে এর উদ্দেশ্য "... একটি নথিতে ইভেন্টগুলি সংযুক্ত করার সমস্ত উপায়কে একত্রিত করা ..." ))

liveমূলত on(বা delegate) পুরো দস্তাবেজের সাথে সংযুক্ত। এটি ব্যবহার করার পক্ষে বা পক্ষে পক্ষে v1.7 হিসাবে অবমূল্যায়িত । এগিয়ে যেতে, আমার সন্দেহ হয় যে আমরা ব্যবহার করতে বা (বা ) এর চেয়ে কেবলমাত্র কোড ব্যবহার করব seeondelegateonbinddelegatelive

তাই অনুশীলনে, আপনি:

এর onমতো ব্যবহার করুন bind:

/* Old: */ $(".foo").bind("click", handler);
/* New: */ $(".foo").on("click", handler);

এর onমতো ব্যবহার করুন delegate(ইভেন্টের প্রতিনিধি কোনও প্রদত্ত উপাদানকে মূলযুক্ত):
```
/* Old: */ $("#container").delegate(".foo", "click", handler);
/* New: */ $("#container").on("click", ".foo", handler);
```
এর onমতো ব্যবহার করুন live(দস্তাবেজের মূল ইভেন্টের প্রতিনিধি):
```
/* Old: */ $(".foo").live("click", handler);
/* New: */ $(document).on("click", ".foo", handler);
```

— টিজে ক্রাউডার
সূত্র

1

আমি লিঙ্ক করা পৃষ্ঠায় বলেছি "যদি নতুন এইচটিএমএল পৃষ্ঠায় ইনজেকশন দেওয়া হচ্ছে, উপাদানগুলিকে নির্বাচন করুন এবং পৃষ্ঠাতে নতুন এইচটিএমএল স্থাপনের পরে ইভেন্ট হ্যান্ডলারগুলি সংযুক্ত করুন Or । তাই সম্ভবত বেঁধে রাখা সম্ভবত লাইভ নয় not আমি কি সঠিক?

— দিয়েগো

@ ডিগো: onএকটি সংমিশ্রণ bindএবং delegateএবং যেমনটি আমি বলেছিলাম, খুব বেশি পছন্দ হয় না live। আপনি onযেমন ব্যবহার করতে পারেন bind(কোনও উপাদানের সাথে সরাসরি হ্যান্ডলার সংযুক্ত করুন), বা আপনি এর onমতো ব্যবহার করতে পারেন delegate(কোনও উপাদানের সাথে কোনও হ্যান্ডলার সংযুক্ত করুন, তবে ঘটনাটি তখনই চালিত করুন যদি ক্লিক করা আসল উপাদানটি কোনও নির্বাচকের সাথে মেলে, এবং মনে হয় যে উপাদানটি হ'ল ইভেন্টটি ঘটেছে - যেমন, ইভেন্ট প্রতিনিধি), বা আপনি এটি ব্যবহার করতে পারেন live( delegateমূল হিসাবে নথিটি ব্যবহার করে)। এটি ইভেন্টের প্রতিনিধি যা আপনাকে গতিশীলভাবে উপাদান যুক্ত করলে এটি কার্যকর করে।

— টিজে ক্রাউডার

1

পুরানো লাইভটি ডেলিগেটের মতোও ব্যবহার করা যেতে পারে: $("#id", ".class").live(fn)= $(".class").delegate("#id", fn );প্রকৃতপক্ষে পুরানো জিকিউরি উত্সে তারা সাধারণ কেস হিসাবে লাইভ ব্যবহার করে এবং একটি বিশেষ কেস হিসাবে প্রতিনিধিত্ব করে, যা আপনি যখন এটির বিষয়ে চিন্তা করেন তখন এগুলি আরও বিভ্রান্তিকর করে তোলে।

— ইসাইলিজা

@ এসাইলিজা: যথেষ্ট ভাল আমি মনে করি না যে এটি ব্যবহারের জন্য এটি পরিচিত হয়েছিল, কারণ তারা delegateঠিক তাড়াতাড়ি যোগ করেছে , কিন্তু এখনও। :-)

— টিজে ক্রাউডার

2

সরাসরি এখন .on () এর শর্টকাট

//from source http://code.jquery.com/jquery-1.7.js
live: function( types, data, fn ) {
    jQuery( this.context ).on( types, this.selector, data, fn );
    return this;
}

এছাড়াও এই পোস্টটি আপনার জন্য কার্যকর হতে পারে http://blog.jquery.com/2011/11/03/jquery-1-7-reLived/

— doochik
সূত্র

2

বেসিক ব্যবহারের ক্ষেত্রে একটি নেই। এই দুটি লাইন কার্যত একই

$( '#element' ).bind( 'click', handler );
$( '#element' ).on( 'click', handler );

.on () ইভেন্টের প্রতিনিধিও করতে পারে এবং এটি পছন্দসই।

.bind () আসলে এখন .on () এর জন্য কেবল একটি উপনাম। এখানে 1.7.1 এ বাইন্ড ফাংশনটির সংজ্ঞা রয়েছে

bind: function( types, data, fn ) {
return this.on( types, null, data, fn );
},

.On () যুক্ত করার ধারণাটি ছিল বাইন্ডিং ইভেন্টের জন্য একাধিক ফাংশন না করে একীভূত ইভেন্ট API তৈরি করা; .on () .bind (), .live () এবং .delegate () প্রতিস্থাপন করে।

— দেনিযেল
সূত্র

0

ইভেন্টের হ্যান্ডলারদের উপাদানটির সাথে যুক্ত করতে চাইলে এমন কিছু বিষয় সম্পর্কে আপনার সচেতন হওয়া উচিত - হ্যান্ডলারটি কোন উপাদানটির সাথে সংযুক্ত ছিল সেদিকে মনোযোগ দিন!

উদাহরণস্বরূপ, যদি আপনি ব্যবহার করেন:

$('.mySelector').bind('click', fn);

আপনি ইভেন্ট হ্যান্ডলারগুলি ব্যবহার করে পাবেন:

$('.mySelector').data('events');

তবে আপনি যদি ব্যবহার করেন:

$('body').on('click', '.mySelector', fn);

আপনি ইভেন্ট হ্যান্ডলারগুলি ব্যবহার করে পাবেন:

$('body').data('events');

(শেষ ক্ষেত্রে প্রাসঙ্গিক ইভেন্ট অবজেক্টে নির্বাচক = "" মাই সিলেক্টর "থাকবে)

— আলেকজান্ডার
সূত্র

eventsযাইহোক undocumented হয় এবং আমার মনে হয় এটি আর 1.9 এ কাজ করে না

— জন ডিভোরাক

ঠিক। নতুন সংস্করণগুলিতে ডেটার পরিবর্তে কেউ _Data ব্যবহার করতে পারেন। উত্তরটি ছিল "ইভেন্টের মালিক" এর পরিবর্তে পুরানো বা নতুন সংস্করণগুলির জন্য সঠিক সিনট্যাক্সের পার্থক্য সম্পর্কে। বিভিন্ন JQuery সংস্করণের জন্য সঠিক বাক্য গঠন সম্পর্কে অন্যান্য পোস্ট রয়েছে। উদাহরণস্বরূপ stackoverflow.com/questions/2518421/…

— আলেকজান্ডার