¿Es posible determinar cuándo se ha representado un elemento utilizando JavaScript?

Question

¿Hay un equivalente de jQuery para hacer lo siguiente:

$(document).ready(function() { 

para un elemento:

$(a).ready(function() { 

tengo contenido en un UpdatePanel y yo estoy llamando .button de jQuery UI() en algunos elementos de anclaje . Después de actualizar el panel de actualización, los anclajes se reintegran y pierden el estilo de la interfaz de usuario.

Ya sé cómo detectar el final de una solicitud de AJAX utilizando .NET AJAX's add_endrequest (handler), pero esperaba una solución más ordenada usando jQuery.delegate.

p. Ej.

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

Answer 1

Si entiendo correctamente su requerimiento, una forma de hacerlo es con el plug-in Live Query.

vivo consulta ... tiene la capacidad de disparar una función (devolución de llamada) cuando coincide con un nuevo elemento y otra función (devolución de llamada) para cuando un elemento es sin ya emparejado

Por ejemplo:

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

---

actualización: Dado que los cambios DOM no se están ejecutando a través de jQuery, desafortunadamente livequery no los ve. Reflexioné sobre este tema antes y consideré una solución basada en encuestas en this answer.

---

Actualización: El sondeo es feo, pero si realmente no hay otra alternativa, aquí hay una solución basada en encuestas que utiliza una manipulación "ficticia" de jQuery para hacer que la consulta en vivo "vea" el cambio. Solo querrá considerar algo como esto como último recurso, si no hay otra opción para vincularse con un método de devolución de llamada.

primer lugar, configure livequery viendo el contenedor donde se producirán las actualizaciones:

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

y luego usar setInterval(), aquí envuelto en una función de confort:

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

para que pueda tener:

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

Aquí hay un working example.Haga clic en el botón para agregar nuevos elementos de DOM sin jQuery, y verá que son recogidos (eventualmente) y rediseñados por livequery. No es bonito, pero funciona.

Answer 2

puede rastrear fácilmente la carga de cualquier elemento en la página web.

 

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

para más detalles, véase en este tema: jQuery How do you get an image to fade in on load?

Answer 3

elementReady: a jQuery plugin

Answer 4

¿Está tratando de resolver el problema? SI es solo estilo: intente agregar en su lugar, css en el encabezado para que la actualización no afecte el estilo. Nota: No estoy seguro exactamente en sus selectores según su pregunta para estos ejemplos.

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

O

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

Si en verdad necesita un poco de gestión de eventos que debería ser capaz de utilizar el delegado utilizando contexto. véanse las notas aquí: 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); 
}); 

o con una cadena

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

Ahora para la respuesta real, ya que usted tiene acceso al evento puede añadirlo directamente a su página con la función pageLoad; Añadir esto:

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

Answer 5

actualización en 2018, puede utilizar la nueva API MutationObserver para esto, aquí es un plugin sólo por eso:

(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 limitación es que sólo funciona para el uso de base de jQuery con cadena como selector de CSS.

Si no necesita el mismo nombre que la compilación preparada, puede usar un nombre diferente y eliminar ready.call(self, callback);.