एक डीआईवी के भीतर परिवर्तनों को सुनें और तदनुसार कार्य करें

Question

मेरे पास एक ऐसा फ़ंक्शन है जो एक XML दस्तावेज़ को पकड़ता है और इसे एक एक्सएसएल दस्तावेज़ के अनुसार बदल देता है। इसके बाद परिणाम आईडी laneconfigdisplay के साथ एक div में डालता है। मैं क्या करना चाहता हूं, परिवर्तन तर्क से अलग है, उस div के लिए एक jQuery परिवर्तन घटना सेट करें ताकि मैं यह कह सकूं कि यह कब बदल गया है, और कुछ jQuery कोड चलाएं।

मैंने निम्नलिखित की कोशिश की है, लेकिन यह काम नहीं करता है!

$(document).ready(function() 
{ 
    $('#laneconfigdisplay').change(function() { 
     alert('woo'); 
    }); 
    //Do XML/XSL transformation here 
}); 

<!-- HTML code here --> 
<div id="laneconfigdisplay"></div> 

मैं क्या गलत कर रहा हूं?

Answer 1

आप अपने स्वयं के कस्टम घटनाओं बनाने के लिए ताकि आप अभी भी तर्क का एक स्पष्ट जुदाई होगा चुन सकते हैं। एक कस्टम घटना के लिए

बाइंड:

$('#laneconfigdisplay').bind('contentchanged', function() { 
    // do something after the div content has changed 
    alert('woo'); 
}); 

अपने समारोह है कि div अद्यतन करता है में:

// all logic for grabbing xml and updating the div here .. 
// and then send a message/event that we have updated the div 
$('#laneconfigdisplay').trigger('contentchanged'); // this will call the function above 

Answer 2

change घटना, textarea & और selectinput तक सीमित है।

अधिक जानकारी के लिए http://api.jquery.com/change/ देखें।

Answer 3

http://api.jquery.com/change/

परिवर्तन केवल इनपुट फार्म तत्वों पर काम करता है।

तुम सिर्फ अपनी XML/XSL रूपांतरण के बाद एक समारोह को गति प्रदान या एक श्रोता बना सकता है:

var html = $('#laneconfigdisplay').html() 
setInterval(function(){ if($('#laneconfigdisplay').html() != html){ alert('woo'); html = $('#laneconfigdisplay').html() } }, 10000) //checks your content box all 10 seconds and triggers alert when content has changed... 

Answer 4

यदि संभव हो तो आप एक पाठ क्षेत्र के लिए div बदल सकते हैं और .change उपयोग कर सकते हैं()।

एक और समाधान छुपा टेक्स्टरेरा का उपयोग कर सकता है और जब आप div को अपडेट करते हैं तो टेक्स्टरेरा को अपडेट कर सकते हैं। फिर छुपा textarea पर .change() का उपयोग करें।

टेक्स्ट क्षेत्र को एक div की तरह कार्य करने के लिए आप http://www.jacklmoore.com/autosize/ का भी उपयोग कर सकते हैं।

<style> 
.hidden{ 
display:none 
} 
</style> 

<textarea class="hidden" rows="4" cols="50"> 

</textarea> 


$("#hiddentextarea").change(function() { 

alert('Textarea changed'); 

}) 

अद्यतन: ऐसा लगता है पाठ क्षेत्र, अद्यतन के बाद defocused किए जाने की अधिक जानकारी के लिए है की तरह: How do I set up a listener in jQuery/javascript to monitor a if a value in the textbox has changed?

Answer 5

वहाँ एक उत्कृष्ट jquery plugin, LiveQuery, that does just this है।

लाइव क्वेरी घटनाओं को बाध्यकारी या मिलान किए गए तत्वों के लिए ऑटो-जादुई रूप से कॉलबैक को फायर करके jQuery चयनकर्ताओं की शक्ति का उपयोग करता है, पृष्ठ लोड होने के बाद भी और डीओएम अपडेट किया जाता है।

उदाहरण के लिए आप सभी ए टैग पर क्लिक ईवेंट को बाध्य करने के लिए निम्न कोड का उपयोग कर सकते हैं, यहां तक ​​कि कोई भी टैग जो आप AJAX के माध्यम से जोड़ सकते हैं।

$('a').livequery('click', function(event) { 
    alert('clicked'); 
    return false; 
}); 

एक बार जब आप अपने दस्तावेज़ में नया एक टैग जोड़ने, लाइव क्वेरी क्लिक करें घटना के लिए बाध्य होगा और कहा कि या कहा जा करने के लिए किया की जरूरत है और कुछ नहीं है।

यहाँ एक working example of its magic है ...

Answer 6

इस

$('#D25,#E37,#E31,#F37,#E16,#E40,#F16,#F40,#E41,#F41').bind('DOMNodeInserted DOMNodeRemoved',function(){ 
      // your code; 
     }); 

इसका उपयोग न करें की कोशिश करो। यह पृष्ठ को क्रैश कर सकता है।

$('mydiv').bind("DOMSubtreeModified",function(){ 
    alert('changed'); 
}); 

Answer 7

हालांकि घटना DOMSubtreeModified हटाई गई है, अब के रूप में अपनी काम कर रहे हैं, किसी भी अस्थायी परियोजनाओं के लिए ताकि आप इसे निम्नलिखित के रूप में उपयोग कर सकते हैं।

$("body").on('DOMSubtreeModified', "#mydiv", function() { 
    alert('changed'); 
}); 

दीर्घकालिक में हालांकि, आप MutationObserver एपीआई का उपयोग करना होगा।