दिलचस्प पोस्ट
आईफोन के लिए नेटवर्क टाइम प्रोटोकॉल रेल में गतिशील बाइंडिंग के साथ एक कच्चे अद्यतन एसक्यूएल निष्पादित कैसे करें पुश नोटिफिकेशन को प्रबंधित करना जब ऐप नहीं चल रहा है सभी ब्राउज़रों के लिए Object.watch ()? क्या किसी के पास बेंचमार्क (कोड और परिणाम) है जो एंड्रॉइड क्षुधा के प्रदर्शन की तुलना एक्सरामिना सी # और जावा में की गई है? वसंत MVC में web.xml में संदर्भलोडर लिस्टनर जोड़ना पाइप '' को कोणीय 2 कस्टम पाइप नहीं मिला कैसे Base64 एन्कोडिंग में node.js करना है? जावास्क्रिप्ट के साथ एक HTML सूची को सॉर्ट करें जांचें कि क्या कुछ विशिष्ट नाम के साथ div मौजूद है PHP त्रुटि: फ़ंक्शन का नाम स्ट्रिंग होना चाहिए मोबाइल डेटा को सक्रिय करने और अक्षम करने के बारे में नवीनतम अपडेट प्रोग्राम मैं छवियों के लिए ज़ूम कार्यक्षमता कैसे प्राप्त करूं? नामों के साथ XML से 'चयन' कैसे करें? फ़ाइल एक्सटेंशन से मेल करने के लिए pathPattern कोई कार्य नहीं करता है यदि कोई फ़ाइल फाइल नाम में कहीं मौजूद है?

जावा या वेनिला जावास्क्रिप्ट में डोम उत्परिवर्तन की घटना

क्या JQuery में डॉम उत्परिवर्तन की घटनाएं हैं या वेनिला जावास्क्रिप्ट में जो कि क्रॉस ब्राउज़र को फ़ायर करता है?

स्पष्ट करने के लिए, मेरे पास मेरे पृष्ठ पर एक स्क्रिप्ट है जो शरीर में एक div डालता है। मेरे पास स्क्रिप्ट तक पहुंच नहीं है और मैं नहीं जानता कि जब div को डाला गया है। मैं सोच रहा था कि क्या कोई डीओएम उत्परिवर्तन घटना है जिसके लिए मैं एक श्रोता जोड़ सकता हूं, यह जानने के लिए कि एक तत्व कब डाला गया है मुझे पता है कि मैं समय-समय पर सम्मिलन की जांच करने के लिए एक टाइमर का उपयोग कर सकता हूं, लेकिन, मुझे वास्तव में ऊपरी नहीं पसंद है, जो यह लागू होगा।

Solutions Collecting From Web of "जावा या वेनिला जावास्क्रिप्ट में डोम उत्परिवर्तन की घटना"

यह निश्चित रूप से एक हैक है, लेकिन नोड्स को सम्मिलित करने के लिए अंतर्निहित DOM विधियों को क्यों नहीं पैच करें? ऐसा करने के दो तरीके हैं:

आप जानते हैं कि किस विशिष्ट तत्व को जोड़ा जाएगा:

var c = document.getElementById('#container'); c.__appendChild = c.appendChild; c.appendChild = function(){ alert('new item added'); c.__appendChild.apply(c, arguments); } 

ए के लिए बेला डेमो

बी आप जानते हैं कि किस प्रकार के तत्व को जोड़ा जाएगा:

 HTMLDivElement.prototype.__appendChild = HTMLDivElement.prototype.appendChild; HTMLDivElement.prototype.appendChild = function(){ alert('new item added'); HTMLDivElement.prototype.__appendChild(this,arguments); } 

बी के लिए बेला डेमो

(ध्यान दें कि समाधान B IE < 8 या किसी अन्य ब्राउज़र द्वारा समर्थित नहीं है जो DOM प्रोटोटाइप का समर्थन नहीं करता है।)

यह तकनीक उसी प्रकार आसानी से सभी अंतर्निहित DOM mutation फ़ंक्शंस जैसे कि insertBefore , removeChild या removeChild

यह सामान्य विचार है, इन डेमो को किसी भी अन्य उपयोग के मामले के लिए अनुकूलित किया जा सकता है – कहें कि आप एक विस्तृत नेट डालना चाहते हैं और सभी प्रकार के अतिरिक्त प्रकार को पकड़ना चाहते हैं और सुनिश्चित करें कि यह सभी ब्राउज़रों पर काम करता है लेकिन IE < 8 ? (उदाहरण के नीचे सी देखें)


अद्यतन करें

सी। फिर से डोम पर चलें, कॉलबैक ट्रिगर करने के लिए प्रत्येक तत्व पर फ़ंक्शन को स्वैप करें, और उसके बाद एक ही पैच लागू करें जिसे किसी भी बच्चे जोड़ा जा रहा है।

 var DOMwatcher = function(root, callback){ var __appendChild = document.body.appendChild; var patch = function(node){ if(typeof node.appendChild !== 'undefined' && node.nodeName !== '#text'){ node.appendChild = function(incomingNode){ callback(node, incomingNode); patch(incomingNode); walk(incomingNode); __appendChild.call(node, incomingNode); }; } walk(node); }; var walk = function(node){ var i = node.childNodes.length; while(i--){ patch(node.childNodes[i]); } }; patch(root); }; DOMwatcher(document.body, function(targetElement, newElement){ alert('append detected'); }); $('#container ul li').first().append('<div><p>hi</p></div>'); $('#container ul li div p').append('<a href="#foo">bar</a>'); 

सी के लिए बेला डेमो

2 अद्यतन करें

जैसा कि टिम डाउन ने टिप्पणी की है, उपर्युक्त समाधान IE < 8 में भी काम नहीं करेगा क्योंकि appendChild एक Function नहीं है और call समर्थन नहीं करता है या apply नहीं करता है। मुझे लगता है कि आप हमेशा clunky लेकिन भरोसेमंद सेट setInterval विधि पर वापस आ सकते हैं यदि typeof document.body.appendChild !== 'function'

कुछ नापसंद DOM उत्परिवर्तन की घटनाएं हैं, जैसे कि DOMNodeInserted और DOMNodeInsertedIntoDocument जो क्रोम 14 और DOMNodeInsertedIntoDocument 9 में मेरे लिए काम करते हैं।

http://jsfiddle.net/Kai/WTJq6/ पर एक उदाहरण देखें

http://www.w3.org/TR/DOM-Level-3-Events/ पर W3C मसौदे पर उन सभी को देखें

JCADE (JQuery बनाएँ और घटनाओं को नष्ट) ऐसा करेंगे यह अन्य ब्राउज़रों के लिए IE और DOM उत्परिवर्तन की घटनाओं के लिए व्यवहार का उपयोग करता है। यह समय की घटनाओं का उपयोग नहीं करता है और लाइवक्व्री जैसी जकाई पद्धतियों को लपेटता नहीं है।

https://github.com/snesin/jcade


     $ (दस्तावेज़) .create ("a", फ़ंक्शन (ईवेंट) {
       चेतावनी (event.target);
     });

प्लग इन के बिना, मुझे विश्वास है, लेकिन मुझे आश्चर्य नहीं होगा कि मैं गलत हूं।

मेरे शोध में से कुछ को चुनने के लिए मिला है

यहां एक है: http://plugins.jquery.com/project/mutation-events

यहां एक और है: https://www.adaptavist.com/display/jQuery/Mutation+Events

यदि आप इस पद्धति के किसी विकल्प की तलाश कर रहे हैं, तो यहां http://www.jqui.net/jquery-projects/jquery-mutate-official/ है, जो आपको घटनाओं को स्वयं जोड़ने और लगभग किसी भी बदलाव के लिए एक घड़ी रखने की अनुमति दे सकता है , वर्ग नाम परिवर्तन, ऊंचाई परिवर्तन, चौड़ाई परिवर्तन

इस के लिए लाइवक्वेंसी प्लगइन का उपयोग किया जा सकता है संस्करण 1.xa टाइमर में समय-समय पर किसी भी परिवर्तन की जांच करने के लिए उपयोग किया गया था। हालांकि, नए संस्करण 2.x शाखा को समय-समय पर बिना परीक्षण (अनचाईत) काम कर रहा है।