JQuery के साथ तत्व सामग्री परिवर्तनों का पता लगाएं

Question

change() फ़ंक्शन काम करता है और प्रपत्र तत्वों पर परिवर्तन का पता लगाता है, लेकिन क्या यह पता लगाने का एक तरीका है कि डोम तत्व की सामग्री को कब बदला गया?

यह तब तक काम नहीं करता है, जब तक #contentकि एक फार्म तत्व न हो

$("#content").change( function(){
    // do something
});

मैं चाहता हूं कि जब ऐसा कुछ किया जाए तो आप ट्रिगर करें:

$("#content").html('something');

भी html()याappend() फ़ंक्शन में कॉलबैक नहीं है।

कोई सुझाव?

Comments

पुराना प्रश्न जो मुझे पता है, लेकिन एक सुरुचिपूर्ण समाधान के लिए मेरे उत्तर की जाँच करें stackoverflow.com/a/23826615/744975

— एंड्रयू एटकिन्सन

Answer 1

ये म्यूटेशन इवेंट हैं ।

मैंने jQuery में म्यूटेशन ईवेंट API का उपयोग नहीं किया है, लेकिन एक सरसरी खोज ने मुझे GitHub पर इस प्रोजेक्ट के लिए प्रेरित किया । मैं परियोजना की परिपक्वता से अनभिज्ञ हूं।

Comments

यह म्यूटेशन ईवेंट प्लग-इन कार्य नहीं करता है, क्योंकि यह ईवेंट्स को jQuery म्यूटेशन विधियों में हुक करता है। उन्हें तब निकाल दिया जाता है जब jQuery स्वयं तत्वों को बदलने की कोशिश करता है, लेकिन तब नहीं जब तत्व jQuery के बाहर से बदल जाते हैं। वे दस्तावेज़ पर परिवर्तन नहीं देखते हैं। इसके बजाय इस छोटे प्लगइन की जाँच करें: stackoverflow.com/questions/3233991/jquery-watch-div/…

— सेबेस्टियन ग्रिग्नोली

गुगली करना और किसी ऐसे पुस्तकालय का लिंक पोस्ट करना, जिसकी आपने कभी कोशिश नहीं की है, बहुत उपयोगी नहीं है। (टिप्पणी करते हुए क्योंकि मुझे नीचा दिखाने के लिए प्रेरित किया गया था।)

— मोनिका सेलियो को

उत्परिवर्तन घटनाओं को हटा दिया जाता है ; उनका उपयोग न करें।

— ब्रॉक एडम्स

उत्परिवर्तन घटनाओं का विकल्प MutationObservers प्रतीत होता है ।

— वुड्रोशाइगरु

Answer 2

मुझे पता है कि यह पोस्ट एक साल पुरानी है, लेकिन मैं उन लोगों को एक अलग समाधान प्रदान करना चाहूंगा जिनके पास एक समान मुद्दा है:

1. JQuery परिवर्तन घटना का उपयोग केवल उपयोगकर्ता इनपुट फ़ील्ड पर किया जाता है क्योंकि यदि कुछ और हेरफेर किया जाता है (जैसे, एक div), तो हेरफेर कोड के साथ आ रहा है। तो, पता लगाएं कि हेरफेर कहां होता है, और फिर आपको वहां जो कुछ भी आवश्यक है उसे जोड़ें।

2. लेकिन अगर यह किसी भी कारण से संभव नहीं है (आप एक जटिल प्लगइन का उपयोग कर रहे हैं या कोई "कॉलबैक" संभावनाएं नहीं पा सकते हैं) तो jQuery दृष्टिकोण मुझे सुझाव देगा:

   ए। सरल डोम हेरफेर के लिए, jQuery के चेनिंग और ट्रैवर्सिंग का उपयोग करें,$("#content").html('something').end().find(whatever)....

   ख। यदि आप कुछ और करना चाहते हैं, तो jQuery के bindकस्टम इवेंट और के साथ नियोजित करेंtriggerHandler

   $("#content").html('something').triggerHandler('customAction');
   
   $('#content').unbind().bind('customAction', function(event, data) {
      //Custom-action
   });

यहाँ jQuery ट्रिगर हैंडलर का लिंक दिया गया है: http://api.jquery.com/triggerHandler/

Comments

अंतिम विचार। यद्यपि यह बहुत व्यापक होना चाहिए: आप #content html के साथ एक छिपे हुए इनपुट फ़ील्ड के मान को अपडेट कर सकते हैं और फिर परिवर्तन इवेंट को छिपे हुए इनपुट फ़ील्ड पर बाँध सकते हैं :) बहुत सारे विकल्प

— Kyle

+1 "खोजें कि हेरफेर कहां होता है, और फिर आपको वहां जो कुछ भी आवश्यक है उसे जोड़ें।" किसी भी हैक / प्लगइन्स के बिना 2 सेकंड में मेरे मुद्दे को फिक्स्ड :)

— हार्टले ब्रॉडी

केवल यहाँ मैं सुझाव देता हूं कि bindआपके हैंडलर के वापस आने की उम्मीद है bool।

— सर्ज सगन

Answer 3

<div>तत्वों के लिए ब्राउज़र ऑनकॉन्ग इवेंट को फायर नहीं करेगा ।

मुझे लगता है कि इसके पीछे तर्क यह है कि इन तत्वों को तब तक नहीं बदला जाएगा जब तक कि जावास्क्रिप्ट द्वारा संशोधित न किया जाए। यदि आप पहले से ही तत्व को स्वयं संशोधित कर रहे हैं (ऐसा करने वाले उपयोगकर्ता के बजाय), तो आप बस उसी समय उपयुक्त साथ कोड को कॉल कर सकते हैं जो आप तत्व को संशोधित करते हैं, जैसे:

 $("#content").html('something').each(function() { });

आप मैन्युअल रूप से इस तरह से एक घटना को आग लगा सकते हैं:

 $("#content").html('something').change();

यदि इनमें से कोई भी समाधान आपकी स्थिति के लिए काम नहीं करता है, तो क्या आप विशेष रूप से पूरा करने की कोशिश कर रहे हैं पर अधिक जानकारी दे सकते हैं?

Comments

यह माना जाता है कि आपने सभी जावास्क्रिप्ट को लिखा है, जो कि मामला नहीं हो सकता है।

— मिस्टर

धन्यवाद!!!! इसने मुझे 6 घंटे तक घूरने वाली समस्या को हल करने में मदद की।

— जॉर्डन पार्मर

वास्तव में मुझे जो चाहिए था।

— smac89

Answer 4

http://jsbin.com/esepal/2 के बारे में क्या

$(document).bind("DOMSubtreeModified",function(){
  console.log($('body').width() + ' x '+$('body').height());
})

इस घटना को म्यूटेशन ऑब्जर्वर एपीआई के पक्ष में चित्रित किया गया है

Comments

एक बुरा विचार नहीं है, हालांकि मुझे आश्चर्य है कि इसका कितना समर्थन है। developer.mozilla.org/en/DOM/DOM_event_reference/…

— Elzo Valugi

आप परिवर्तनों के लिए एक विशिष्ट तत्व की निगरानी कैसे करते हैं? वर्तमान में दस्तावेज़ पूरे पृष्ठ की निगरानी करता है।

— पाटोशी at ト

Answer 5

को बांधने की कोशिश करें DOMSubtreeModifiedघटना क्योंकि परीक्षण भी डोम का हिस्सा है।

इस पोस्ट को यहाँ SO पर देखें:

कैसे-कर-ए-मॉनिटर--डोम के लिए परिवर्तन

Answer 6

इसे आज़माएं, इसे जेम्स पडोलसी (जेपी ने यहां एसओ पर बनाया था) और ठीक वैसा ही जैसा आप चाहते हैं (मुझे लगता है)

http://james.padolsey.com/javascript/monitoring-dom-properties/

Comments

Object.prototype.watch के क्रॉस ब्राउज़र संस्करण के लिए gist.github.com/384583

— Radek

Answer 7

और एचटीएमएल 5 के साथ हमारे पास मूल डोम उत्परिवर्तन पर्यवेक्षक हैं ।

Comments

भविष्य से हाय। यह अब क्रॉसब्रोसर (2015) है।

— मार्कग

Answer 8

यह सख्ती से एक jQuery का जवाब नहीं है - लेकिन डिबगिंग के लिए उल्लेख करने के लिए उपयोगी है।

Firebug में आप DOM ट्री में एक तत्व पर राइट-क्लिक कर सकते हैं और 'ब्रेक ऑन अट्रैक्शन चेंज' सेट कर सकते हैं:

जब एक स्क्रिप्ट में एक विशेषता बदल जाती है, तो डिबग विंडो दिखाई देगी और आप नीचे ट्रैक कर सकते हैं कि यह क्या चल रहा है। नीचे तत्व सम्मिलन और तत्व हटाने के लिए एक विकल्प भी है (स्क्रूग्रेब में पॉपअप द्वारा अस्पष्ट रूप से अस्पष्ट)।

Comments

यह मददगार है, लेकिन ठीक वैसा नहीं जैसा वह पूछ रहा था। यह उन चीजों का पता लगाएगा जब कोई वर्ग बदलता है, या जब कोई शैली विशेषता जोड़ी जाती है या बदल जाती है। यह जाँच नहीं करेगा कि नोड के अंदर की सामग्री कब बदलती है। उदाहरण के लिए, यदि कुछ जावास्क्रिप्ट कहीं एक नोड को <span> हैलो </ span> से <span> विश्व </ span> में बदल देती है, तो यह इसका पता नहीं लगाएगा

— जोशुआ सोइल्यू

Answer 9

मैं छोटे JS लाइब्रेरी विकसित कर रहा हूं जिसे mutabor ( https://github.com/eskat0n/mutabor ) कहा जाता है, जिसका उद्देश्य DOM म्यूटेशन इवेंट्स के उपयोग को आसान बनाना है। उदाहरण के लिए Demo.html देखें।

Answer 10

Livequery प्लगइन का प्रयास करें। मुझे लगता है कि मैं ऐसा ही कुछ काम कर रहा हूं।

http://docs.jquery.com/Plugins/livequery

Answer 11

अक्सर इसे प्राप्त करने का एक सरल और प्रभावी तरीका यह है कि आप कब और कहां डोम को संशोधित कर रहे हैं, इस पर नज़र रखें।

आप ऐसा एक केंद्रीय फ़ंक्शन बनाकर कर सकते हैं जो DOM को संशोधित करने के लिए हमेशा ज़िम्मेदार होता है। फिर आप इस फ़ंक्शन के भीतर से संशोधित तत्व पर जो भी सफाई की आवश्यकता होती है।

हाल के एक आवेदन में, मुझे तत्काल कार्रवाई की आवश्यकता नहीं थी, इसलिए मैंने किसी भी संशोधित तत्वों के लिए एक वर्ग जोड़ने के लिए हाथ से लोड () फ़ंक्शन के लिए कॉलबैक का उपयोग किया, और फिर सेटइंटरवल टाइमर के साथ हर कुछ सेकंड में सभी संशोधित तत्वों को अपडेट किया।

$($location).load("my URL", "", $location.addClass("dommodified"));

फिर आप इसे संभाल सकते हैं लेकिन आप चाहते हैं - जैसे

setInterval("handlemodifiedstuff();", 3000); 
function handlemodifiedstuff()
{
    $(".dommodified").each(function(){/* Do stuff with $(this) */});
}

Comments

यह माना जाता है कि आपने सभी जावास्क्रिप्ट को लिखा है, जो कि मामला नहीं हो सकता है।

— मिस्टर

Answer 12

आप html (, या किसी भी) फ़ंक्शन में कॉलबैक विकल्प जोड़ सकते हैं:

$.fn.oldHtml = $.fn.html;
$.fn.html = function(html,fn){
  fn = fn || function(){};
  var result =  this.oldHtml(html);
  fn();
  return result;
};
$('body').html(11,function(){alert("haha");});

यहां डेमो करें।

आप कुछ तत्व पर परिवर्तन करते हैं, न कि तत्व को उस चीज से बदलने के लिए मजबूर किया जाता है जिसे आपको पकड़ना है।

Comments

मुझे आज इस समस्या को हल करना था। मैं उस कोड को संपादित नहीं कर सकता था जिसे वास्तव में html () कहा जाता था क्योंकि यह एक 3rd पार्टी लाइब्रेरी में है। इसका एक संशोधित संस्करण मेरे लिए एकदम सही था। मैंने ऐसा किया: $ .fn.oldHtml = $ .fn.html (); $ .fn.html = function (e) {var result = this.oldHtml (e); this.trigger ('afterHtmlChange', e);} अब मैं किसी भी एलिमेंट के बाद किसी भी एलिमेंट के बाद किसी भी एलिमिनेशन पर चाहता हूं कि किसी भी एलिमेंट पर jHtmlChange ईवेंट हो, जो फायर करेगा जब भी कुछ भी jQuery के html () fn पर कॉल करेगा।

— डैनियल हॉवर्ड

वूप्स, मामूली गलती। ऊपर मेरी टिप्पणी में Fn होना चाहिए: फ़ंक्शन (e) {var result = this.oldHtml (e); this.trigger ( 'afterHtmlChange', ई); वापसी परिणाम;}

— डैनियल हावर्ड

Answer 13

मैंने एक स्निपेट लिखा जो किसी घटना पर एक तत्व के परिवर्तन के लिए जांच करेगा।

इसलिए यदि आप थर्ड पार्टी जावास्क्रिप्ट कोड या कुछ और का उपयोग कर रहे हैं और आपको यह जानना आवश्यक है कि जब आपने क्लिक किया है तो कुछ दिखाई देता है या बदलता है।

नीचे दिए गए स्निपेट के लिए, आपको यह बताने की आवश्यकता है कि जब आप एक बटन क्लिक करने के बाद तालिका की सामग्री में बदलाव करते हैं।

$('.button').live('click', function() {

            var tableHtml = $('#table > tbody').html();
            var timeout = window.setInterval(function(){

                if (tableHtml != $('#table > tbody').
                    console.log('no change');
                } else {
                    console.log('table changed!');
                    clearInterval(timeout);
                }

            }, 10);
        });

छद्म कोड:

• एक बार जब आप एक बटन पर क्लिक करते हैं
• जिस तत्व को आप बदलने की उम्मीद कर रहे हैं, उसका html कैप्चर किया गया है
• हम फिर लगातार तत्व के HTML की जांच करते हैं
• जब हम html को अलग पाते हैं तो हम चेक करना बंद कर देते हैं

Answer 14

हम Mutation Events का उपयोग करके इसे प्राप्त कर सकते हैं । Www.w3.org के अनुसार, उत्परिवर्तन ईवेंट मॉड्यूल को किसी दस्तावेज़ की संरचना में किसी भी बदलाव की अधिसूचना की अनुमति देने के लिए डिज़ाइन किया गया है, जिसमें अटर और पाठ संशोधन शामिल हैं। अधिक विस्तार के लिए घटनाक्रम

उदाहरण के लिए :

$("body").on('DOMSubtreeModified', "#content", function() {
    alert('Content Modified'); // do something
});

Comments

इसे कुछ समय के लिए हटा दिया गया है। म्यूटेशन ऑब्जर्वर (एक ही अवधारणा)

— कारल्स अल्कोलेआ

Answer 15

संभव नहीं है, मेरा मानना ​​है कि सामग्री में बदलाव की घटना है लेकिन यह निश्चित रूप से एक्स-ब्राउज़र नहीं है

मैं पृष्ठभूमि में दूर कुछ बुरा अंतराल चबाने के बिना संभव नहीं कहना चाहिए!

Comments

कुछ भी असंभव नहीं!

— १२:०१ पर जहरथथ