jQuery तैयार या लोड ईवेंट के साथ लाइव

Question

मैं jQuery टूल्स टूलटिप प्लगइन का उपयोग कर रहा हूं, जिसे $('selector').tooltip() के साथ प्रारंभ किया गया है। मैं इसे किसी भी मौजूदा या भविष्य .tooltipper तत्व पर कॉल करना चाहता हूं। मैंने सोचा कि निम्नलिखित काम करेगा:

$('.tooltipper').live('ready', function(){ 
    $(this).tooltip() 
} 

लेकिन यह असफल रहा --- तैयार घटना आग नहीं आई। लोड के लिए वही। मैंने पढ़ा है कि लाइवक्वायरी मैं जिस परिणाम की तलाश कर रहा हूं उसका परिणाम उत्पन्न कर सकता हूं, लेकिन निश्चित रूप से यह देखने के लिए jQuery .live() का उपयोग करने का एक तरीका है, दस्तावेज़ों का कहना है कि यह सभी jQuery घटनाओं के लिए काम करता है, जिनमें से मेरा मानना ​​है कि ready है एक।

Answer 1

jQ एपीआई (http://api.jquery.com/live/) से उद्धरित:

jQuery 1.3.x केवल निम्न JavaScript घटनाओं (कस्टम घटनाओं के अतिरिक्त) में से बंधे किया जा सकता है .live(): क्लिक करें, dblclick, keydown , कीप्रेस, कीप, mousedown, mousemove, माउसआउट, माउसओवर, और माउसअप।

jQuery 1.4 के रूप में .live() विधि कस्टम घटनाओं के साथ-साथ सभी जावास्क्रिप्ट ईवेंट का समर्थन करता है।

jQuery 1.4.1 के रूप में भी लाइव के साथ फोकस और धुंधला काम (अधिक उपयुक्त, बुलबुले, घटनाओं फोकस और फोकसआउट के लिए मैपिंग)।

jQuery 1.4.1 के रूप में होवर ईवेंट निर्दिष्ट किया जा सकता है ("माउसेंटर माउसलीव" पर मैपिंग)।

.live() तैयार घटना का समर्थन करने के लिए प्रतीत नहीं होता है।

Answer 2

हर्नमोबाइल के उत्कृष्ट उत्तर में जोड़ने के लिए; bindReady() को देखते हुए, जो आंतरिक कॉल कि jQuery दस्तावेज़ लोड घटना के लिए हर बार जब आप $(some_function) या $(document).ready(some_function) फोन हम देखते हैं कि हम क्यों "ready" करने के लिए बाध्य नहीं कर सकते बाध्य करने के लिए बनाता है:

bindReady: function() { 
     if (readyBound) { 
      return; 
     } 

     readyBound = true; 

     // Catch cases where $(document).ready() is called after the 
     // browser event has already occurred. 
     if (document.readyState === "complete") { 
      return jQuery.ready(); 
     } 

     // Mozilla, Opera and webkit nightlies currently support this event 
     if (document.addEventListener) { 
      // Use the handy event callback 
      document.addEventListener("DOMContentLoaded", DOMContentLoaded, false); 

      // A fallback to window.onload, that will always work 
      window.addEventListener("load", jQuery.ready, false); 

     // If IE event model is used 
     } else if (document.attachEvent) { 
      // ensure firing before onload, 
      // maybe late but safe also for iframes 
      document.attachEvent("onreadystatechange", DOMContentLoaded); 

      // A fallback to window.onload, that will always work 
      window.attachEvent("onload", jQuery.ready); 

      // If IE and not a frame 
      // continually check to see if the document is ready 
      var toplevel = false; 

      try { 
       toplevel = window.frameElement == null; 
      } catch(e) { //and silently drop any errors 
        } 
        // If the document supports the scroll check and we're not in a frame:  
      if (document.documentElement.doScroll && toplevel) { 
       doScrollCheck(); 
      } 
     } 
    } 

यह कुल मिलाकर, $(some_function) कॉल एक समारोह जो बांधता के लिए:

• DOMContentLoaded
• onreadystatechange (DOMContentLoaded)
• window.load/ऑनलोड

आपका सबसे अच्छा शर्त उन कार्यों कि नई .tooltipper तत्वों बना सकता है, बल्कि (जो केवल एक बार होता) तैयार घटना के लिए सुनने के लिए कोशिश कर रहा से करने के लिए बाध्य होगा।

Answer 3

हर्नस्मोबाइल सही है। JQuery लाइव तैयार घटना का समर्थन नहीं करता है।

यही कारण है कि मैंने एक प्लगइन बनाया जो दोनों को जोड़ता है। आप एक बार अपनी कॉलबैक पंजीकृत करते हैं, और उसके बाद आपको मैन्युअल रूप से जोड़े जाने वाली सामग्री के लिए प्लगइन को कॉल करने की आवश्यकता होगी।

$.liveReady('.tooltipper', function(){ 
    this.tooltip() 
}); 

फिर नए सामग्री तैयार करते समय:

element.html(somehtml); 
element.liveReady(); 

या

$('<div class="tooltipper">...').appendTo($('body')).liveReady(); 

---

एक डेमो यहाँ उपलब्ध है: http://cdn.bitbucket.org/larscorneliussen/jquery.liveready/downloads/demo.html

परिचयात्मक पोस्ट चेक आउट यहाँ: http://startbigthinksmall.wordpress.com/2011/04/20/announcing-jquery-live-ready-1-0-release/

---

इसके अलावा http://docs.jquery.com/Plugins/livequery पर एक नज़र है, जो डोम पर परिवर्तन के लिए listenes है।