यह निर्धारित करना संभव है कि जावास्क्रिप्ट का उपयोग करते समय एक तत्व कब प्रस्तुत किया गया हो?

Question

क्या कोई jQuery निम्नानुसार करने के बराबर है:

$(document).ready(function() { 

किसी तत्व के लिए:

$(a).ready(function() { 

मेरे पास एक अद्यतन पैनेल में सामग्री है और मैं कुछ एंकर तत्वों पर jQuery UI के .button() को कॉल कर रहा हूं। अपडेट पैनेल रीफ्रेश किए जाने के बाद, एंकर फिर से रेंडर किए जाते हैं और यूआई स्टाइल खो देते हैं।

मुझे पहले से ही पता है कि .NET AJAX के add_endrequest (हैंडलर) का उपयोग करके AJAX अनुरोध के अंत का पता लगाने के लिए, लेकिन jQuery.delegate का उपयोग कर एक neater समाधान की उम्मीद कर रहा था।

उदा।

$('body').delegate('#mybutton', 'load', (function(){ //this doesnt work... } 

Answer 1

तो मैं समझता हूँ कि आपकी आवश्यकता को सही ढंग से, एक तरीका यह है Live Query प्लग-इन के साथ है।

लाइव क्वेरी ... एक समारोह (कॉलबैक) आग करने की क्षमता है, जब यह एक तत्व नहीं अब मिलान किया है जब के लिए एक नए तत्व और एक अन्य समारोह (कॉलबैक) से मेल खाता है

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

$('#someRegion a').livequery(function(){ 
    do_something(); 
}); 

---

अद्यतन: चूंकि डीओएम परिवर्तन jQuery के माध्यम से नहीं चल रहे हैं, दुर्भाग्य से लाइवक्वेरी उन्हें नहीं देखता है। मैंने this answer में मतदान-आधारित समाधान से पहले इस मुद्दे पर विचार किया और विचार किया।

---

अद्यतन: मतदान एक प्रकार का बदसूरत है, लेकिन यदि वास्तव में कोई अन्य विकल्प नहीं है, तो यहां एक मतदान-आधारित समाधान है जो लाइव "लाइव" परिवर्तन करने के लिए एक jQuery "डमी" हेरफेर का उपयोग करता है। यदि आप कॉलबैक विधि में जुड़ने के लिए कोई विकल्प नहीं है तो आप केवल अंतिम उपाय के रूप में इस तरह कुछ विचार करना चाहते हैं।

$('div#container').livequery(function(){ 
    $(this).css('color','red'); // do something 
}); 

और फिर setInterval(), यहाँ एक सुविधा समारोह में लिपटे का उपयोग करें::

function pollUpdate($el, freq){ 
    setInterval(function(){ 
    $el.toggleClass('dummy'); 
    }, freq); 
}; 

तो तुम हो सकता है:

सबसे पहले, ऊपर livequery कंटेनर जहां अपडेट हो जाएगा देख सेट

$(document).ready(function(){ 
    pollUpdate($('div#container'), 500); 
}); 

यहां एक working example है।JQuery के बिना नए डोम तत्व जोड़ने के लिए बटन पर क्लिक करें, और आप देखेंगे कि वे उठाए गए हैं (अंततः) और लाइवक्वायरी द्वारा पुन: स्थापित। सुंदर नहीं है, लेकिन यह काम करता है।

Answer 2

आप आसानी से वेब पेज में किसी भी तत्व के लिए लोड पर ट्रैक कर सकते हैं।

 

$(function(){$("#ele_id").bind("load", function() { alert('hurray!') });}) 
 

अधिक जानकारी के लिए

इस सूत्र देखें: jQuery How do you get an image to fade in on load?

Answer 3

elementReady: a jQuery plugin

Answer 4

क्या आप गलत समस्या को हल करने की कोशिश कर रहे हैं? अगर यह सिर्फ शैली है: इसके बजाय हेडर में सीएसएस जोड़ने की कोशिश करें ताकि अद्यतन शैली को प्रभावित न करे। नोट: इन उदाहरणों के लिए आपके प्रश्न के आधार पर आपके चयनकर्ताओं पर बिल्कुल सही नहीं है।

$('head').append('<style type="text/css">body a{margin:0;}</style>'); 

या

$('<style type="text/css">body a {margin: 0;}</style>').appendTo($('head')); 

आप प्रतिनिधि संदर्भ का उपयोग कर का उपयोग करने में सक्षम होना चाहिए आप वास्तव में किसी इवेंट मैनेजमेंट की जरूरत है। नोट यहाँ देखें: http://brandonaaron.net/blog/2010/03/4/event-delegation-with-jquery

$('body div').delegate('a', 'change', function(event) { 
    // this == a element 
    $(this).addClass(class here); 
}); 

या एक श्रृंखला

$('body').children('div').delegate('a', 'change', function(event) { 
    // this == a element 
    $(this).addClass(class here); 
}); 

अब असली जवाब के लिए

साथ, जब से तुम घटना की पहुंच है तो आप सीधे अपने पृष्ठ के लिए Pageload समारोह के साथ जोड़ सकते हैं; इस जोड़ें:

(function($, ready) { 
    $.fn.ready = function(callback) { 
     var self = this; 
     callback = callback.bind(self); 
     if (self[0] == document) { // it will return false on document 
      ready.call(self, callback); 
     } else if (self.length) { 
      console.log('length'); 
      callback(); 
     } else { 
      if (!self.data('ready_callbacks')) { 
       var callbacks = $.Callbacks(); 
       callbacks.add(callback); 
       var observer = new MutationObserver(function(mutations) { 
        var $element = $(self.selector); 
        if ($element.length) { 
         callbacks.fireWith($element); 
         observer.disconnect(); 
         self.removeData('ready_callbacks'); 
        } 
       }); 
       observer.observe(document.body, { 
        childList: true, 
        subtree: true 
       }); 
      } else { 
       self.data('ready_callbacks').add(callback); 
      } 
     } 
     return self; 
    }; 
})(jQuery, jQuery.fn.ready); 

सीमा यह है कि यह केवल jQuery के आधार उपयोग के लिए काम करते हैं:

function pageLoad(sender, args) 
{ 
    if (args.get_isPartialLoad()) 
    { 
     //jQuery code for partial postbacks can go in here. 
    } 
} 

Answer 5

2018 में अद्यतन, आप इस के लिए नए MutationObserver एपीआई का उपयोग कर सकते हैं, यहां सिर्फ इतना है कि के लिए एक प्लगइन है सीएसएस चयनकर्ता के रूप में स्ट्रिंग के साथ।

यदि आपको तैयार होने के समान नाम की आवश्यकता नहीं है तो आप अलग-अलग नाम का उपयोग कर सकते हैं और ready.call(self, callback); हटा सकते हैं।