ডায়নামিক এইচটিএমএল লোড করার পরে ক্লিক ইভেন্ট যুক্ত করার জন্য jQuery .live () বনাম .on () পদ্ধতি

Question

আমি jQuery v.1.7.1 ব্যবহার করছি যেখানে .live () পদ্ধতিটি আপাতভাবে হ্রাস করা হয়েছে।

আমার যে সমস্যাটি হচ্ছে তা হ'ল ডায়নামিকভাবে যখন কোনও উপাদানটিতে এইচটিএমএল লোড করা হয়:

$('#parent').load("http://..."); 

যদি আমি পরে চেষ্টা ক্লিক করে একটি ইভেন্ট ইভেন্ট যোগ করি তবে এটি এই পদ্ধতির কোনওটি ব্যবহার করে ইভেন্টটি নিবন্ধিত করে না:

$('#parent').click(function() ...); 

অথবা

// according to documentation this should be used instead of .live()
$('#child').on('click', function() ...); 

এই কার্যকারিতা অর্জনের সঠিক উপায় কী? এটি কেবল আমার জন্য .live () নিয়ে কাজ করছে বলে মনে হচ্ছে, তবে আমার সেই পদ্ধতিটি ব্যবহার করা উচিত নয়। মনে রাখবেন যে # বাচ্চা একটি গতিশীল লোড উপাদান।

ধন্যবাদ।

Comments

আপনি কেন "অনুমিত অবহেলিত" বলছেন ? আপনি ডক্স বিশ্বাস করেন না?

এটা না কল্পনানুসারে অবচিত: এটা হয় অবচিত। আপনি যদি jQuery ডকোটির.live() দিকে তাকান তবে এটি আপনাকে কীভাবে বিদ্যমান ব্যবহারগুলি পুনরায় লেখার .live()জন্য .delegate()বা .on()(আপনি সংস্করণে 1.7+ তে আছেন কিনা তার উপর নির্ভর করে) আপনাকে জানায়। যদিও উল্লেখ করুন যে আপনি যদি .click()"পরে" এর সাথে হ্যান্ডলার যুক্ত করেন যেমন আপনি উল্লেখ করেছেন, যেমন, গতিযুক্ত উপাদানগুলি লোড করার পরে, এটি কাজ করা উচিত - একমাত্র সমস্যাটি উপাদানগুলি গতিযুক্ত করার .click() আগে নির্ধারণের চেষ্টা করছে ।

— nnnnnn

আমি মূলত যা বোঝাতে চেয়েছিলাম, সেহেতু আমি শব্দটিকে 'আপাতদৃষ্টিতে' পরিবর্তন করেছি। যাইহোক, আমি এখন বুঝতে পারি যে স্পষ্টতই। লোড () ইভেন্টটি অবিচ্ছিন্ন তাই # শিশু উপাদানটি কেবলমাত্র সাফল্যের হাতলটিতে নির্ভরযোগ্যভাবে স্বীকৃতি পেতে পারে, যা বোঝা যায়।

— শন থোম্যান

গতিশীলভাবে তৈরি উপাদানগুলিতে ইভেন্টের বাঁধার

— শোদেব

Answer 1

আপনি যদি ক্লিক হ্যান্ডলারটি এমন কোনও উপাদানটির জন্য কাজ করতে চান যা গতিশীলভাবে লোড হয়, তবে আপনি ইভেন্ট হ্যান্ডলারটি প্যারেন্ট অবজেক্টে সেট করেন (এটি গতিশীলভাবে লোড হয় না) এবং এটি এমন একটি নির্বাচক দেয় যা আপনার ডায়নামিক অবজেক্টের সাথে মেলে:

$('#parent').on("click", "#child", function() {});

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

এটি এইভাবে করা হয়েছে কারণ আপনি #parentবস্তুটির সাথে ইভেন্টটি #childএখনও সংযুক্ত করতে পারবেন এমনকি যখন অবজেক্টটি এখনও বিদ্যমান নেই, তবে পরে এটি উপস্থিত থাকলে এবং ক্লিক করা হবে, ক্লিক ইভেন্টটি #parentবস্তুটির উপর বুদবুদ হয়ে যাবে, এটি দেখতে পাবে যে এটির উদ্ভব হয়েছে #childএবং #childআপনার ইভেন্টটি ক্লিক করতে এবং ফায়ার করার জন্য একটি ইভেন্ট হ্যান্ডলার রয়েছে ।

Comments

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

— মাইকচিন্কেল

এক মিলিয়ন আপ । গতিশীলভাবে তৈরি শিশুদের জন্য jQuery এ এটি সম্ভব ছিল বুঝতে পেরে আমি নকআউটটি ব্যবহার শুরু করেছি, আপনাকে অনেক ধন্যবাদ।

— ব্রুক হেনসলে

আপনার কোনও বই বা কিছু লেখার বিষয়টি বিবেচনা করা উচিত: আপনার ছোট পাঠটি আমার কাছে « অন ​​() » সম্পর্কে jQuery ডক্সের পুরো পৃষ্ঠার চেয়ে বেশি সহায়ক হয়েছে » অনেক ধন্যবাদ!

— কোলেস্টেরল

@ জফ্রেন্ড ২০০ আপনি কী জানেন যে আমরা কীভাবে এই একই প্রক্রিয়াটিকে হোভার, নন-হোভারের পরিস্থিতিতে প্রয়োগ করতে পারি? এমন কোন উত্স আছে যে এ সম্পর্কে কথা বলবে?

— klewis

@ ব্ল্যাকহক - এই উত্তরটি দেখুন । আপনি ইভেন্টগুলির জন্য ইভেন্টগুলি নিবন্ধন করতে পারবেন mouseenterএবং mouseleaveহ্যান্ডলারের ভিতরে যা পরীক্ষা শুরু করতে পারেন test jQuery এর সিউডো "হোভার" ইভেন্ট প্রতিনিধিদের সাথে উপলব্ধ নেই।

— jفر00

Answer 2

এটা চেষ্টা কর:

$('#parent').on('click', '#child', function() {
    // Code
});

$.on()ডকুমেন্টেশন থেকে :

ইভেন্ট হ্যান্ডলারগুলি কেবলমাত্র নির্বাচিত উপাদানগুলিতে আবদ্ধ; আপনার কোডটিতে কল করার সময় সেগুলি অবশ্যই পৃষ্ঠায় উপস্থিত থাকতে পারে .on()।

#childআপনি যখন কল করবেন তখন আপনার উপাদানটির অস্তিত্ব নেই $.on(), সুতরাং ইভেন্টটি সীমাবদ্ধ নয় (বিপরীত $.live())। #parentযাইহোক, না বিদ্যমান, তাই ঘটনা বাঁধাই যে জরিমানা।

আমার কোডের উপরের দ্বিতীয় যুক্তিটি যদি ইভেন্টটি বুদ্বুদ হয় তবে কেবল ট্রিগার করতে 'ফিল্টার' হিসাবে কাজ #parentকরে #child।

Comments

আমি যদি $। লোড () পদ্ধতির পরে যদি $ .on () পদ্ধতিটি কল করি, তবে কেন # শিশু উপাদানটি সেই সময়ে উপস্থিত থাকবে না?

— শন থোম্যান

@ সানথোম্যান - আপনাকে এটিকে .load()পদ্ধতির সাফল্য হ্যান্ডলার থেকে কল করতে হবে - পদ্ধতির পরে কোড থেকে নয় .load()। #childসাফল্য হ্যান্ডলার যখন বাস্তবায়িত হয় এবং আগে হয় না শুধুমাত্র তখন লোড হওয়া হিসাবে পরিচিত।

— jفر00

এবং তারপরেও যে সময় আপনি ডম-এ ফিরে এসেছিলেন তা ডেটা সন্নিবেশ করতে যে সময় লাগে তার অর্থ এটি সংযুক্ত নাও হতে পারে। আমি ইদানীং প্রচুর একক পৃষ্ঠার অ্যাপ্লিকেশন কাজ করছি এবং আমার স্ট্যান্ডার্ডটি var $ বডি = $ ('বডি'); । বডি.অন ("ইভেন্ট", ".element / # শ্রেণি", ফাংশন (ঙ) {}); সব কিছুর জন্য. 1 জন নির্বাচক। কী বোঝা হচ্ছে বা কী বোঝানো হবে তা নিয়ে চিন্তা করবেন না।

— lupos

Answer 3

$(document).on('click', '.selector', function() { /* do stuff */ });

সম্পাদনা: আমি এটি কীভাবে কাজ করে তার উপর কিছুটা আরও তথ্য সরবরাহ করছি, কারণ ... শব্দ। এই উদাহরণ সহ, আপনি সম্পূর্ণ নথিতে একটি শ্রোতা স্থাপন করছেন।

আপনি যখন clickকোনও উপাদান (গুলি) মিলে চলেছেন .selector, ইভেন্টটি মূল নথিতে বুদবুদ হয় - যতক্ষণ না অন্য কোনও শ্রোতা কল আসে নাevent.stopPropagation() পদ্ধতিটি - যা পিতামাতার উপাদানগুলিতে শীর্ষে রাখে।

নির্দিষ্ট উপাদান বা উপাদানগুলির সেটকে আবদ্ধ করার পরিবর্তে, আপনি নির্দিষ্ট নির্বাচকের সাথে মেলে এমন উপাদানগুলির থেকে আগত কোনও ইভেন্টের জন্য শুনছেন। এর অর্থ আপনি একটি শ্রোতা তৈরি করতে পারেন, এক সময়, যা স্বয়ংক্রিয়ভাবে বিদ্যমান বিদ্যমান উপাদানগুলির সাথে সাথে কোনও গতিযুক্ত যুক্ত উপাদানগুলির সাথে মিলবে।

পারফরম্যান্স এবং মেমরির ব্যবহার (বৃহত আকারের অ্যাপ্লিকেশনগুলিতে) সহ কয়েকটি কারণে এটি স্মার্ট

সম্পাদনা করুন:

স্পষ্টতই, আপনি যে নিকটতম অভিভাবক উপাদানটি শুনতে পারবেন এটি আরও ভাল এবং আপনি documentযেসব শিশুদের জন্য ইভেন্টগুলি পর্যবেক্ষণ করতে চান সেই বাচ্চাদের সেই অভিভাবকের উপাদানটির মধ্যে থাকা যতক্ষণ না আপনি তার জায়গায় যে কোনও উপাদান ব্যবহার করতে পারেন ... তবে এর আসলে কিছুই করার নেই you প্রশ্ন সহ।

Comments

তিনি চেষ্টা করেছিলেন $(element).on(...)। এই $(document).on(...,element,...)। বিভিন্ন জন্তু।

— সিএওও

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

— L422Y

এখানে @ L422Y এর মন্তব্যটি খুব বিভ্রান্তিকর। আপনার কর্মক্ষমতা প্রভাব সম্পর্কে জানতে আগ্রহী হন, তাহলে কটাক্ষপাত করা @ jfriend00 এর মন্তব্য উপর @ জ্যারেড এর উত্তর

— যা দমকা ভ্যান ডি ওয়াল

@ গুস্তভান্ডেওয়াল এটি কীভাবে বিভ্রান্ত করছে? যদি আপনি গিয়ে একশ 'this (এটি)। ও (...) বনাম কোনও মৌলিক উপাদানের জন্য কোনও ইভেন্ট শোনার জন্য ইস্যু করেন তবে তা যথেষ্ট পরিমাণে পারফরম্যান্ট।

— L422Y

আপনি কেবল ইভেন্টগুলি সংযুক্ত করার বিষয়ে কথা বলছেন। রিয়েল-ওয়ার্ল্ড পারফরম্যান্সের বাধাগুলি খুব বেশি শ্রোতা গুলি ছুঁড়ে ফেলে (যেমন আপনি প্রতিনিধিত্ব করেন), প্রচুর পরিমাণে উপাদান নয় যেগুলির সাথে কোনও ইভেন্ট সংযুক্ত হওয়া দরকার।

— গস্ট ভ্যান ডি ওয়াল

Answer 4

1.7 এ .live () এর সমতুল্যটি দেখতে:

$(document).on('click', '#child', function() ...); 

মূলত, ক্লিক ইভেন্টগুলির জন্য দস্তাবেজটি দেখুন এবং তাদের # শিশুদের জন্য ফিল্টার করুন।

Comments

কারণ ইভেন্ট হ্যান্ডলারটি নথিতে সংযুক্ত করে (উপায়টি .live()করে)।

— সিএওও

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

— jفر00

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

— জ্যারেড

খারাপ, এই নেই অননুমোদিত অনুকরণ .live()পদ্ধতির; তবে প্রতিনিধিদের নিয়ন্ত্রণ করার ক্ষমতা অবশ্যই সুবিধাজনক।

— ড্যান লাগেজ

Answer 5

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

if(jQuery && !jQuery.fn.live) {
    jQuery.fn.live = function(evt, func) {
        $('body').on(evt, this.selector, func);
    }
}

আপনি jQuery লোড করার পরে এবং লাইভ () কল করার আগে কেবল এটি অন্তর্ভুক্ত করুন।

Answer 6

.on () jQuery সংস্করণ 1.7 এবং তারপরের জন্য। আপনার যদি পুরানো সংস্করণ থাকে তবে এটি ব্যবহার করুন:

$("#SomeId").live("click",function(){
    //do stuff;
});

Comments

ওপি বলেছে "আমি jQuery v.1.7.1 ব্যবহার করছি"

— সেলককুমার আরুমুগাম

@ প্রেমিক - আমার উত্তরকে বাদ দিয়ে নিজের উত্তর পোস্ট করবেন না কেন? আমি প্রতি একক দিন লাইভ () ব্যবহার করি 1.6 এর চেয়ে কম বয়সী সমস্ত সংস্করণ সহ এবং এটি দুর্দান্ত কাজ করে। আমি দেখতে পাচ্ছি যে আপনি ডকুমেন্টেশন পড়ার ক্ষেত্রে ভাল, তবে কখনও কখনও কোনও ব্যক্তির জন্য কিছু অনুশীলন করা আরও সহায়তা করে। .live () কাজ করে। সময়কাল।

— ম্যাট ক্যাস্যাট

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

— jਫਰ00

আমি downvote করিনি, কিন্তু যদিও .live()স্পষ্টভাবে এমনকি সংস্করণ 1.7 আপনি এখনও ব্যবহার করা উচিত কাজ করে .delegate()বা .on()কারণ .live()একটি ভাল কারণ জন্য অসমর্থিত হয়। যতক্ষণ আপনি দুটি নতুন ফাংশনের জন্য সিনট্যাক্সের পরিবর্তনটি নোট করেন তা হয় ঠিকঠাক কাজ করবে।

— nnnnnn

@ jender00- আপনি একদম ঠিক বলেছেন। লম্বা দিন. আমার ক্ষমা।

— ম্যাট ক্যাস্যাট

Answer 7

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

আমার পৃষ্ঠাগুলিতে আমি বোতামগুলির টেবিল সারিগুলি এবং অনেকগুলি ডম স্টেটিকে গতিশীলভাবে তৈরি করি। কিন্তু আমি যাদুতে ব্যবহার করার পরে অদৃশ্য হয়ে গেল।

এটির মতো অন্যান্য সমাধানগুলি শিশুটির মতো এটি ব্যবহারের মতো প্রতি ক্লিকগুলিতে প্রতিবার আপনার ফাংশনগুলিকে কল করে। তবে আমি এটি আবার ঘটানোর উপায় খুঁজে পেয়েছি এবং সমাধানটি এখানে is

আপনার কোডটি লিখুন:

function caller(){
    $('.ObjectYouWntToCall').on("click", function() {...magic...});
}

কলকারীকে কল করুন (); আপনি এই পৃষ্ঠায় আপনার অবজেক্ট তৈরি করার পরে।

$('<dom class="ObjectYouWntToCall">bla... bla...<dom>').appendTo("#whereeveryouwant");
caller();

এই পৃষ্ঠায় প্রতিটি ক্লিক না করার কথা যখন মনে করা হয় তখন আপনার ফাংশনটি ডাকা হয়।