jQuery: डीओएम परिवर्तनों को कैसे सुनें?

Question

क्या यह संभव है और मैं पूरे डीओएम पेड़ के माध्यम से jQuery के साथ परिवर्तनों को कैसे सुन सकता हूं?

मेरा विशिष्ट मुद्दा: मेरे पास एक 'टूलटिप' फ़ंक्शन है जो किसी भी HTML तत्व पर hover पर एक स्टाइलिश तरीके से title विशेषता की सामग्री प्रदर्शित करता है। जब आप एक होवर करते हैं, हालांकि, मानक द्वारा ब्राउज़र अपने स्वयं के बॉक्स में title प्रस्तुत करता है। मैं इसे दबाना चाहता हूं। तो मैंने क्या सोचा है कि title की सामग्री को एक कस्टम (HTML5) data-title की विशेषता को स्थानांतरित करने के लिए पहली बार विशेषता है, और फिर मेरा टूलटिप फ़ंक्शन data-title के साथ काम करेगा।

समस्या यह है कि बाद में मैं HTML को गतिशील रूप से जोड़/हटा/बदल सकता हूं, इसलिए मुझे उन तत्वों को 'पुनर्निर्मित' करने की आवश्यकता है - उन शीर्षकों को फिर से बदलें। यह अच्छा होगा अगर कोई ईवेंट श्रोता था जो मेरे लिए ऐसे परिवर्तनों को सुनता और तत्वों को स्वचालित रूप से पुन: स्थापित करता।

Answer 1

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

इस का संदर्भ लें: W3 MutationEvent

उदाहरण:

$("element-root").bind("DOMSubtreeModified", "CustomHandler"); 

Answer 2

आप इस यहाँ पर देखने की जरूरत है: http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-mutationevents

Answer 3

तो, अतिरिक्त कोड के बिना, इस एक अंधे शॉट का एक सा है [सदस्य टोनी द्वारा अनुसंधान के जवाब में संपादित] , लेकिन ऐसा लगता है कि यहां के बारे में सोचने के लिए दो चीजें हैं: 1. डिफ़ॉल्ट ब्राउज़र टूलटिप व्यवहार; 2. एक संभावित रूप से अद्यतन डोम और काम करने के लिए अपने कस्टम टूलटिप्स की क्षमता।

# 1: के संबंध में जब आप तत्व पर अपनी कस्टम घटना को बांधते हैं, तो आप event.preventDefault() का उपयोग कर सकते हैं ताकि टूलटिप्स दिखाई न दें। यह ठीक से काम नहीं करता है। इसलिए, "शीर्षक" विशेषता का उपयोग करने के लिए कामकाज मूल्य को पकड़ना है, इसे डेटा ऑब्जेक्ट ($.data() फ़ंक्शन) में धक्का देना है, और उसके बाद शीर्षक को खाली स्ट्रिंग के साथ हटाएं (removeAttr असंगत है)। फिर माउसलेव पर, आप डेटा ऑब्जेक्ट से मान लेते हैं और इसे वापस शीर्षक में दबाते हैं। यह विचार यहां से आता है: How to disable tooltip in the browser with jQuery?

# 2 के बारे में: डीओएम परिवर्तन पर पुनः बाध्यकारी होने के बजाय, आपको केवल एक श्रोता तत्व को बांधने की आवश्यकता है जिसे कभी नष्ट होने की उम्मीद नहीं है। आम तौर पर यह किसी प्रकार का कंटेनर तत्व होता है, लेकिन यह document (लगभग .live() अनुमानित कर सकता है जिसे अब हटा दिया गया है) यदि आपको वास्तव में एक समेकित कंटेनर की आवश्यकता है।

var container = $('.section'); 

container.on('mouseenter', 'a', function() { 
    var $this = $(this); 
    var theTitle = $this.attr('title'); 
    $this.attr('title', ''); 
    $('#notatooltip').html(theTitle); 
    $.data(this, 'title', theTitle); 
}); 

container.on('mouseleave', 'a', function() { 
    $('#notatooltip').html(''); 
    var $this = $(this); 
    var storedTitle = $.data(this, 'title'); 
    $this.attr('title', storedTitle); 
}); 

मेरे अवास्तविक मार्कअप (सिर्फ इस उदाहरण के लिए) यहाँ है:: यहाँ एक नमूना मेरी खुद के तैयार करने के कुछ नकली मार्कअप का उपयोग करता है है

<div class="section"> 
    <a href="#" title="foo">Hover this foo!</a> 
    <div id="notatooltip"></div> 
</div> 

और एक बेला यहाँ है: http://jsfiddle.net/GVDqn/ या कुछ के साथ सैनिटी चेक: http://jsfiddle.net/GVDqn/1/

शायद ऐसा करने का एक और इष्टतम तरीका है (यदि आप एक चयनकर्ता के साथ दो अलग-अलग आयोजनों के लिए दो अलग-अलग कार्यों को बांध सकते हैं तो ईमानदारी से शोध नहीं किया गया) लेकिन यह चाल चल जाएगा।

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

Answer 4

जैसा कि ग्रेग पेटीट ने उल्लेख किया है, आपको तत्व पर() फ़ंक्शन का उपयोग करना चाहिए।

यह क्या करता है आपको किसी ईवेंट के लिए चयनकर्ता को बांधने की अनुमति मिलती है, तो jQuery चयनकर्ता द्वारा लौटाई गई वस्तुओं को उपलब्ध होने पर इस ईवेंट हैंडलर को जोड़ देगा।

आप घटना पर माउस पर सक्रिय करने के समारोह चाहते थे और आप इसके बारे में वर्ग के साथ सभी तत्वों पर आग करना चाहता है तो * FIELD_TITLE आप इस करना होगा *:

$('.field_title').bind('mouseenter', function() { doSomething(); }); 

इस पर ट्रिगर किया जाएगा * field_title * की कक्षा वाले किसी भी ऑब्जेक्ट पर ओवर ओवर माउस और फ़ंक्शन doSomething() निष्पादित करें।

आशा करता है कि भावना :)

की