Ist es möglich zu bestimmen, wann ein Element mit JavaScript gerendert wurde?

Question

Gibt es ein Äquivalent jQuery Folgendes zu tun:

$(document).ready(function() { 

für ein Element:

$(a).ready(function() { 

Ich habe Inhalt in einem Update und ich rufe jQuery UI .Taste() auf einigen Ankerelemente . Nachdem das Updatepanel aktualisiert wurde, werden die Anker neu gerendert und verlieren den UI-Stil.

Ich weiß bereits, wie man das Ende einer AJAX-Anfrage mit .NET AJAX's add_endrequest (Handler) erkennt, aber hoffte auf eine bessere Lösung mit jQuery.delegate.

z.B.

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

Answer 1

Wenn ich Ihre Anforderung richtig verstanden hat, eine Möglichkeit, dies mit dem Live Query Plug-in zu tun ist.

Live-Abfrage ... hat die Fähigkeit, eine Funktion (Callback) ausgelöst, wenn sie paßt ein neues Element und eine andere Funktion (Rückruf) für, wenn ein Element ist keine abgestimmt mehr

Zum Beispiel:

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

---

Update: Da die DOM-Änderungen nicht über jQuery laufen, werden sie von der Live-Abfrage leider nicht angezeigt. Ich habe das Thema schon einmal angeschaut und eine Lösung auf der Basis von Umfragen in Erwägung gezogen: this answer. Update: Polling ist irgendwie hässlich, aber wenn es wirklich keine andere Alternative gibt, hier ist eine Abfrage-basierte Lösung, die eine jQuery "Dummy" -Manipulation verwendet, um Live-Abfrage "sehen" die Änderung. Sie sollten nur so etwas als letzten Ausweg betrachten - wenn es keine Möglichkeit gibt, sich an eine Callback-Methode zu binden.

Zuerst einrichten livequery die Behälter zu beobachten, wo das Updates auftreten:

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

Und dann setInterval() verwenden, hier in einer Komfortfunktion eingewickelt:

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

So können Sie haben:

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

Hier ist ein working example.Klicken Sie auf die Schaltfläche, um neue DOM-Elemente ohne jQuery hinzuzufügen, und Sie werden sehen, dass sie (schließlich) abgeholt und durch Live-Abfrage neu gestaltet werden. Nicht schön, aber es funktioniert.

Answer 2

Sie können leicht auf Belastung für jedes Element in der Webseite verfolgen.

 

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

für weitere Details zu sehen dieses Thema anschauen: jQuery How do you get an image to fade in on load?

Answer 3

elementReady: a jQuery plugin

Answer 4

Versuchen Sie, das falsche Problem zu lösen? WENN es nur Stil ist: Versuchen Sie stattdessen, CSS in der Kopfzeile hinzuzufügen, so dass das Update den Stil nicht beeinflusst. Hinweis: Nicht genau sicher, was Ihre Selektoren angeht, basierend auf Ihrer Frage für diese Beispiele.

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

ODER

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

Wenn Sie in der Tat einige Event-Management benötigen, sollten Sie in der Lage sein, den Delegierten Zusammenhang mit verwenden. siehe Anmerkungen hier: 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); 
}); 

oder mit einer Kette

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

Jetzt für die richtige Antwort, da Sie Zugriff auf den Fall, Sie haben es direkt auf Ihre Seite mit der Funktion pageload hinzufügen können; Fügen Sie diese:

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

Answer 5

-Update im Jahr 2018 können Sie neuen MutationObserver API für diese, hier ist ein Plugin nur dafür:

(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); 

die Einschränkung ist, dass es nur für die Basis Verwendung von jQuery arbeiten mit String als CSS-Selektor.

Wenn Sie nicht den gleichen Namen wie in build in ready benötigen, können Sie einen anderen Namen verwenden und ready.call(self, callback); entfernen.