নির্দিষ্ট ক্লাসের ডিভিও সনাক্তকরণের জন্য jquery ডিওমে যুক্ত করা হয়েছে

Question

.on()পৃষ্ঠাগুলির পরে তৈরি হওয়া ডিভগুলির ইভেন্টগুলিকে আবদ্ধ করতে আমি ব্যবহার করছি । এটি ক্লিক করার জন্য সূক্ষ্মভাবে কাজ করে, মাউসেন্টার ... তবে আমার জানতে হবে কখন মাই ক্লাস ক্লাসের একটি নতুন ডিভ যুক্ত হয়েছে। আমি এটি খুঁজছি:

$('#MyContainer').on({

  wascreated: function () { DoSomething($(this)); }

}, '.MyClass');

আমি এটা কিভাবে করবো? আমি আমার সম্পূর্ণ অ্যাপ্লিকেশনটি একটি প্লাগইন ছাড়াই লিখতে পরিচালিত করেছি এবং আমি এটি সেভাবেই রাখতে চাই।

ধন্যবাদ

Comments

এটি কি আপনার নিজস্ব কোড যা উপাদান তৈরি করে? যদি তা হয় তবে আপনি এটি তৈরির সময় পরীক্ষা করে দেখতে পারেন এবং সেই অনুসারে কাজ করতে পারেন।

— পরাবাস্তব স্বপ্নগুলি

হ্যাঁ, এটি সত্য তবে .on () এর সাহায্যে আমি দস্তাবেজগুলিতে ইভেন্টগুলি আবদ্ধ করতে পারি ready আমি ডসোমথিংয়ের সাথে একই আচরণের সন্ধান করছি।

— ফ্রেঞ্চি

আপনি use ("ডিভি / আপনার নির্বাচক") ব্যবহার করতে পারেন has কোনও ডিভের নির্দিষ্ট শ্রেণি রয়েছে কিনা তা যাচাই করতে। আমার ধারণা আপনি এই এপিআই আপনার ব্যবহারের জন্য রাখতে পারেন।

— KBN

.on () কেবল ইভেন্টের জন্য। আপনি একটি কাস্টম ইভেন্টের জন্য সেট আপ করতে পারেন, তবে আপনি নতুন উপাদান তৈরি করার সময় আপনাকে সেই ইভেন্টটি ট্রিগার করতে হবে।

— পরাবাস্তব স্বপ্নগুলি

উপাদানটির পৃষ্ঠাটিতে যুক্ত

— ড্যান ড্যাসক্লেস্কু

Answer 1

পূর্বে যে কেউ jQuery এর domManipডম ম্যানিপুলেশনগুলি দেখতে এবং কী কী উপাদানগুলি andোকানো হয়েছিল তা দেখতে jQuery এর পদ্ধতির দিকে ঝুঁকতে পারে তবে jQuery দলটি jQuery 3.0+ এ বন্ধ করে দিয়েছে কারণ এটি সাধারণত jQuery পদ্ধতিতে হুক করার ভাল সমাধান নয় এবং তারা ' এটি তৈরি করে ফেলেছে যাতে অভ্যন্তরীণ domManipপদ্ধতিটি আর মূল jQuery কোডের বাইরে পাওয়া যায় না।

মিউটেশন ইভেন্টগুলিও হ'ল পূর্বে যেমন কিছু করা যেতে পারে

$(document).on('DOMNodeInserted', function(e) {
    if ( $(e.target).hasClass('MyClass') ) {
       //element with .MyClass was inserted.
    }
});

এটি এড়ানো উচিত এবং পরিবর্তে আজ মিউটেশন পর্যবেক্ষকদের ব্যবহার করা উচিত, যা এটির মতো কাজ করবে

var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        console.log(mutation)
        if (mutation.addedNodes && mutation.addedNodes.length > 0) {
            // element added to DOM
            var hasClass = [].some.call(mutation.addedNodes, function(el) {
                return el.classList.contains('MyClass')
            });
            if (hasClass) {
                // element has class `MyClass`
                console.log('element ".MyClass" added');
            }
        }
    });
});

var config = {
    attributes: true,
    childList: true,
    characterData: true
};

observer.observe(document.body, config);

Comments

ফায়ারফক্স এবং ওয়েবকিট ঠিকঠাক হওয়া উচিত, তবে এটির জন্য সমর্থন কিছুটা দুর্বল। এটি আই 9 তে কাজ করা উচিত, তবে সম্ভবত আই 8 তে খুব বেশি নয়। আমি জানি আমি ওয়ার্কআরাউন্ডগুলি দেখেছি, এবং আমি সত্যিই এটি IE তে পরীক্ষা করতে পারি নি, তাই প্রথমে এটি পরীক্ষা করে দেখুন, যদি এটি কাজ না করে থাকে তবে দেখুন কোনও কর্মক্ষেত্র আছে কিনা। একটি প্লাগইন রয়েছে যা দেখে মনে হচ্ছে এটি এখানে আইই সমর্থন যোগ করে , তবে এটি চেষ্টা করে দেখেনি, গুগল অনুসন্ধানে সন্ধান করেছে।

— অ্যাডেনেও

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

— ফরাসী

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

— ফরাসী

এই "কোডবিহীন প্রকারের ত্রুটি পেয়েছে: এই কোডটির সাথে সম্পত্তিটি 'অপরিজ্ঞাত" পড়া যায় না

— গর্ডি

Answer 2

এখানে আমার প্লাগইনটি সর্বাধিক এটি করে - jquery.initialize

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

.Each ফাংশনের মতো একই সিনট্যাক্সটি সূচনাতে সূচনা করুন

$(".some-element").initialize( function(){
    $(this).css("color", "blue");
});

তবে এখন যদি নতুন উপাদান মেলে। কিছু উপাদান নির্বাচনকারী পৃষ্ঠায় উপস্থিত হয়, এটি তাত্ক্ষণিকভাবে আরম্ভ করা হবে। নতুন আইটেমটি যুক্ত করার উপায়টি গুরুত্বপূর্ণ নয়, আপনার কোনও কলব্যাক ইত্যাদির যত্ন নেওয়া দরকার না etc.

$("<div/>").addClass('some-element').appendTo("body"); //new element will have blue color!

প্লাগইন উপর ভিত্তি করে MutationObserver

Comments

তোমাকে অনেক ধন্যবাদ.

— ব্র্যান্ডন হ্যারিস

কীভাবে শুরু করবো? আমি যে

— এভজেনি ভোস্টক

"("। কিছু-উপাদান ")। আরম্ভ করুন [..] অবচিত করা হয়েছে। In .initialize ("। AddDialog", ফাংশন () {$ ('। NoData')। লুকান ();}) ব্যবহার করুন; পরিবর্তে.

— হিমি

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

— নেভারমোর

আপনি গিথুব এ সম্পর্কে ইস্যু যোগ করতে পারেন। আপাতত, প্রযুক্তিগতভাবে আপনি এটি করতে পেরেছিলেন$('.myClass').addClass('ignore-initialize'); $.initialize('.myClass:not(.ignore-initialize)', callback);

— পাই

Answer 3

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

function onElementInserted(containerSelector, elementSelector, callback) {

    var onMutationsObserved = function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.addedNodes.length) {
                var elements = $(mutation.addedNodes).find(elementSelector);
                for (var i = 0, len = elements.length; i < len; i++) {
                    callback(elements[i]);
                }
            }
        });
    };

    var target = $(containerSelector)[0];
    var config = { childList: true, subtree: true };
    var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
    var observer = new MutationObserver(onMutationsObserved);    
    observer.observe(target, config);

}

onElementInserted('body', '.myTargetElement', function(element) {
    console.log(element);
});

আমার জন্য গুরুত্বপূর্ণ, এটি ক) লক্ষ্যযুক্ত উপাদানটিকে "যুক্তডোডগুলি" এর মধ্যে যে কোনও গভীরতায় উপস্থিত থাকতে পারে এবং খ) প্রাথমিকভাবে সন্নিবেশ করলেই উপাদানটি মোকাবেলা করার ক্ষমতা (পুরো নথির সেটিংস অনুসন্ধান করার বা "ইতিমধ্যে প্রক্রিয়াজাত" উপেক্ষা করার প্রয়োজন নেই) পতাকা)।

Comments

তোমার অবস্থা হওয়া উচিত if(mutation.addedNodes.length)কারণ addedNodesএবং removedNodesঅ্যারে সবসময় আছে mutationধরণ childList(IE11, Chrome53, FF49 চেক ইন)। এখনও +1, কারণ আপনার একমাত্র উত্তর যেখানে addedNodesবিবেচনা করা হয় ( callbackকোনও নোড যুক্ত হলে কেবল তাকে ডাকা হয়); কেবল এই থ্রেডই নয় তবে আরও অনেকগুলি থ্রেড। callbackনোড মোছা হচ্ছে এমন কি, অন্যরা সবাই সমস্ত মিউটেশনের জন্য অনুরোধ করছে।

— বিবেক আটালি

Answer 4

3 বছরের অভিজ্ঞতা পরে, আমি এইভাবে শুনি "ডিওমে যোগ করা একটি নির্দিষ্ট শ্রেণীর উপাদান" : আপনি কেবল jQuery html()ফাংশনে একটি হুক যুক্ত করুন :

function Start() {

   var OldHtml = window.jQuery.fn.html;

   window.jQuery.fn.html = function () {

     var EnhancedHtml = OldHtml.apply(this, arguments);

     if (arguments.length && EnhancedHtml.find('.MyClass').length) {

         var TheElementAdded = EnhancedHtml.find('.MyClass'); //there it is
     }

     return EnhancedHtml;
   }
}

$(Start);

আপনি যদি jQuery ব্যবহার করেন তবে এটি কাজ করে। এবং এটি ব্রাউজার-নির্দিষ্ট ইভেন্টের উপর নির্ভর করে না DOMNodeInserted, যা ক্রস ব্রাউজারের সাথে সামঞ্জস্যপূর্ণ নয়। আমি একই বাস্তবায়নও যুক্ত করেছি.prepend()

সামগ্রিকভাবে, এটি আমার জন্য কবজির মতো কাজ করে এবং আশা করি আপনার জন্যও।

Comments

হুম - আমি স্পষ্ট করে বলছি যে আপনি যদি কেবলমাত্র html"জিকুয়েরি ব্যবহার না করে" সাধারণভাবে ডিওএম সংশোধন করতে jQuery এর সাহায্যকারী ব্যবহার করেন তবে এটি কাজ করে। উপাদানগুলি যুক্ত করে বলুন, jQuery.appendএই ইভেন্টটি ট্রিগার করবে না।

— iameli

হ্যাঁ, এবং কেন আমি) পরিষ্কারভাবে জানান যে আমি .preprend (সঙ্গে একই বাস্তবায়ন জুড়েছে এবং আপনি .append ব্যবহার () তারপর .append () একই জিনিস করে যে

— Frenchie

CSS3 অ্যানিমেশনগুলি ব্যবহার করে একটি আরও দ্রুত পন্থা রয়েছে । ওপেন সোর্স লাইব্রেরি আরও সহজ কোডে insertionQ('#intercom-container').every(function(/element){ element.style.display = 'none'; });

— codeণ

ডাউনটা কেন ?? এটি আসলে কাজ করে: কোনও প্লাগইন এবং হ্যাকি সেটটাইমআউট ফাংশন নেই।

— ফরাসী

উত্সাহিত - এটি একটি বৈধ বিকল্প - কেন বিশ্বে (!!!) এটিকে হ্রাস করা হয়েছে ?????? ড্যান, সিএসএস 3 অ্যানিমেশনগুলি এক্সবিসি নয়: caniuse.com/#search=keyframes ; davidwalsh.name/detect-node-insertion ।

— কোডি

Answer 5

আপনি মিউটেশন ইভেন্টগুলি ব্যবহার করতে পারেন

http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-mutesevents

সম্পাদনা

এমডিএন থেকে: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/ পরিবর্তন_আভেন্টস

অবচয় এই বৈশিষ্ট্যটি ওয়েব থেকে সরানো হয়েছে। যদিও কিছু ব্রাউজার এখনও এটি সমর্থন করতে পারে তবে এটি বাদ দেওয়ার প্রক্রিয়াধীন। পুরানো বা নতুন প্রকল্পে এটি ব্যবহার করবেন না। এটি ব্যবহার করে পৃষ্ঠা বা ওয়েব অ্যাপ্লিকেশনগুলি যে কোনও সময় ভেঙে যেতে পারে।

মিউটেশন পর্যবেক্ষকরা DOM4 এ রূপান্তর ইভেন্টগুলির প্রস্তাবিত প্রতিস্থাপন। সেগুলি ফায়ারফক্স 14 এবং ক্রোম 18 এ অন্তর্ভুক্ত করা হবে।

https://developer.mozilla.org/en/docs/Web/API/ রূপান্তরকর্তা

MutationObserverবিকাশকারীদের একটি ডিওএম পরিবর্তনের প্রতিক্রিয়া জানাতে একটি উপায় সরবরাহ করে। এটি ডিওএম 3 ইভেন্টের নির্দিষ্টকরণে সংজ্ঞায়িত মিউটেশন ইভেন্টগুলির প্রতিস্থাপন হিসাবে ডিজাইন করা হয়েছে।

ব্যবহারের উদাহরণ

নিম্নলিখিত উদাহরণটি http://hacks.mozilla.org/2012/05/dom-mutesobserver-reacting-to-dom-changes-without-killing-browser-performance/ থেকে নেওয়া হয়েছিল ।

// select the target node
var target = document.querySelector('#some-id');

// create an observer instance
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation.type);
  });    
});

// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true };

// pass in the target node, as well as the observer options
observer.observe(target, config);

// later, you can stop observing
observer.disconnect();

Comments

মিউটেশন ইভেন্টগুলি মিডনান অনুসারে মিউটেশনঅবার্সারদের পক্ষে অনেক বেশি অবহেলা করা হয়েছে

— ওলগা

এখন যে IE10 EOL, এটা প্রায় বলতে নিরাপদ হওয়া উচিত MutationObserver ব্যাপকভাবে সমর্থিত।

— রাইমো

Answer 6

অ্যাডিনিওর উত্তরে দুটি সংযোজন:

(1) আমরা লাইনটি পরিবর্তন করতে পারি

return el.classList.contains('MyClass');

প্রতি

if( el.classList ) {
    return el.classList.contains('MyClass');
} else {
    return false;
}

সুতরাং আমরা "Uncaught TypeError: Cannot read property 'contains' of undefined"ত্রুটি দেখতে পাবেন না ।

(২) যুক্ত subtree: trueহওয়া configনোডগুলি সমস্ত যুক্ত উপাদানগুলিতে পুনরাবৃত্তভাবে অনুসন্ধান করতে যুক্ত করুন।