Est-il possible de déterminer quand un élément a été rendu en utilisant JavaScript?

Question

Y at-il un équivalent jQuery pour effectuer les opérations suivantes:

$(document).ready(function() { 

pour un élément:

$(a).ready(function() { 

J'ai contenu dans un UpdatePanel et je fais appel de .button jQuery UI() sur certains éléments d'ancrage . Après l'actualisation du panneau de mise à jour, les ancres sont rediffusées et perdent le style de l'interface utilisateur.

Je savais déjà comment détecter la fin d'une requête ajax en utilisant add_endrequest (handler) de .NET AJAX, mais espérais une solution plus simple en utilisant jQuery.delegate.

par exemple.

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

Answer 1

Si je comprends bien votre exigence, une façon de le faire est avec le plug-in Live Query.

... Recherche en direct a la capacité de tirer une fonction (rappel) quand il correspond à un nouvel élément et une autre fonction (rappel) quand un élément est pas plus adapté

Par exemple:

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

---

Mise à jour: Étant donné que les modifications DOM ne sont pas exécutées via jQuery, malheureusement, livequery ne les voit pas. J'ai réfléchi à ce problème avant et considéré une solution basée sur l'interrogation dans this answer.

---

Mise à jour: L'interrogation est un peu moche, mais s'il n'y a vraiment pas d'autre alternative, voici une solution basée sur l'interrogation qui utilise une manipulation "fictive" de jQuery pour voir "voir" le changement. Vous voudriez seulement considérer quelque chose comme ceci en dernier recours - s'il n'y a aucune option pour lier dans une méthode de rappel.

Tout d'abord, mis en place livequery regarder le conteneur dans lequel les mises à jour auront lieu:

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

Et puis utilisez setInterval(), enveloppée dans une fonction pratique:

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

vous pouvez avoir:

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

Voici un working example.Cliquez sur le bouton pour ajouter de nouveaux éléments DOM sans jQuery, et vous verrez qu'ils sont récupérés (éventuellement) et redéfinis par livequery. Pas joli, mais ça marche.

Answer 2

Vous pouvez facilement suivre à la charge pour n'importe quel élément de la page Web.

 

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

pour plus de détails, voir ce fil: jQuery How do you get an image to fade in on load?

Answer 3

elementReady: a jQuery plugin

Answer 4

Êtes-vous en train d'essayer de résoudre le mauvais problème? Si c'est juste style: Essayez d'ajouter à la place, css dans l'en-tête afin que la mise à jour n'a pas d'impact sur le style. Remarque: Pas exactement sur vos sélecteurs en fonction de votre question pour ces exemples.

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

OU

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

Si vous avez besoin en effet une gestion d'événements, vous devriez être en mesure d'utiliser le délégué en utilisant le contexte. voir les notes ici: 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); 
}); 

ou avec une chaîne

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

Maintenant, pour la vraie réponse, puisque vous avez accès à l'événement, vous pouvez l'ajouter directement à votre page avec la fonction pageLoad; Ajouter ceci:

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

Answer 5

Mise à jour en 2018, vous pouvez utiliser les nouvelles API MutationObserver pour cela, voici un plugin juste pour que:

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

la limitation est qu'il fonctionne uniquement pour une utilisation de base de jQuery avec une chaîne comme sélecteur CSS.

Si vous n'avez pas besoin du même nom que la version prête, vous pouvez utiliser un nom différent et supprimer ready.call(self, callback);.