459 votos

jQuery $(document).listo y UpdatePanels?

Estoy usando jQuery para cable de seguridad de algunos mouseover efectos sobre los elementos que están dentro de un UpdatePanel. Los eventos están obligados en $(document).ready . Por ejemplo:

$(function() {    
    $('div._Foo').bind("mouseover", function(e) {
        // Do something exciting
    });    
});

Por supuesto, esto funciona bien la primera vez que se carga la página, pero cuando el UpdatePanel hace un parcial de actualización de la página, no correr y el ratón efectos no funcionan más dentro del UpdatePanel.

¿Cuál es el enfoque recomendado para el cableado cosas en jQuery no sólo en la primera carga de la página, pero cada vez de un UpdatePanel incendios parcial de la actualización de la página? Debo ser el uso de la ASP.NET ajax ciclo de vida en lugar de $(document).ready?

527voto

Dan Herbert Puntos 38336

Un UpdatePanel reemplaza completamente el contenido del panel de actualización en una actualización. Esto significa que los eventos que haya suscrito no están suscritos debido a que hay nuevos elementos en la que el panel de actualización.

Lo he hecho para evitar este es volver a suscribirse a los eventos que necesito después de cada actualización. Yo uso $(document).ready() de la carga inicial, a continuación, utilice Microsoft PageRequestManager (disponible si usted tiene un panel de actualización en su página) para volver a suscribirse en cada actualización.

$(document).ready(function() {
    // bind your jQuery events here initially
});

var prm = Sys.WebForms.PageRequestManager.getInstance();

prm.add_endRequest(function() {
    // re-bind your jQuery events here
});

La PageRequestManager es un objeto de javascript que automáticamente está disponible si un panel de actualización en la página. Usted no necesita hacer otra cosa que el código anterior con el fin de utilizar esto como el UpdatePanel en la página.

Si necesita más información detallada de control, este evento pasa a argumentos similares a cómo .NET los eventos son argumentos pasados (sender, eventArgs) así que usted puede ver lo que elevó el evento y sólo re-enlazar si es necesario.

Aquí está la última versión de la documentación de Microsoft: msdn.microsoft.com/.../bb383810.aspx


Una mejor opción que usted puede tener, dependiendo de sus necesidades, es para uso jQuery .on(). Estos métodos son más eficientes que volver a suscribirse a DOM de los elementos en cada actualización. Leer toda la documentación antes de utilizar este enfoque, sin embargo, ya que puede o no puede satisfacer sus necesidades. Hay un montón de plugins de jQuery que sería razonable para refactorizar para uso .delegate() o .on(), por lo que en esos casos, es mejor volver a suscribirse.

158voto

Barbaros Alp Puntos 3439
<script type="text/javascript">

        function BindEvents() {
            $(document).ready(function() {
                $(".tr-base").mouseover(function() {
                    $(this).toggleClass("trHover");
                }).mouseout(function() {
                    $(this).removeClass("trHover");
                });
         }
</script>

El área que se va a actualizar.

<asp:UpdatePanel...
<ContentTemplate
     <script type="text/javascript">
                    Sys.Application.add_load(BindEvents);
     </script>
 *// Staff*
</ContentTemplate>
    </asp:UpdatePanel>

61voto

Brian MacKay Puntos 10483

Control de usuario con jQuery Dentro de un UpdatePanel

Esto no es una respuesta directa a la pregunta, pero me hizo poner esta solución en conjunto por la lectura de las respuestas que he encontrado aquí, y pensé que alguien podría encontrar útil.

Yo estaba tratando de usar un jQuery textarea limitador en el interior de un Control de Usuario. Este fue un proceso difícil, debido a que el Control de Usuario se ejecuta dentro de un UpdatePanel, y fue perdiendo sus enlaces de devolución de llamada.

Si esto fue sólo una página, las respuestas que aquí se han aplicado directamente. Sin embargo, los Controles de Usuario no tienen acceso directo a la cabeza de la etiqueta, ni tampoco tienen acceso directo a la UpdatePanel como algunas de las respuestas que asumir.

Me acabó poniendo este bloque de secuencia de comandos a la derecha en la parte superior de mi Usuario de marcado del Control. Para los primeros se unen, se utiliza el $(document).listo, y, a continuación, utiliza prm.add_endRequest desde allí:

<script type="text/javascript">
    function BindControlEvents() {
        //jQuery is wrapped in BindEvents function so it can be re-bound after each callback.
        //Your code would replace the following line:
            $('#<%= TextProtocolDrugInstructions.ClientID %>').limit('100', '#charsLeft_Instructions');            
    }

    //Initial bind
    $(document).ready(function () {
        BindControlEvents();
    });

    //Re-bind for callbacks
    var prm = Sys.WebForms.PageRequestManager.getInstance(); 

    prm.add_endRequest(function() { 
        BindControlEvents();
    }); 

</script>

Así que... Sólo pensé que alguien podría saber que esto funciona.

33voto

svinto Puntos 8601

La actualización a jQuery 1.3 y uso:

$(function() {

    $('div._Foo').live("mouseover", function(e) {
        // Do something exciting
    });

});

Nota: live funciona con la mayoría de los eventos, pero no todos. Hay una lista completa en la documentación.

20voto

Daniel Hursan Puntos 424

También puede probar:

<asp:UpdatePanel runat="server" ID="myUpdatePanel">
    <ContentTemplate>

        <script type="text/javascript" language="javascript">
        function pageLoad() {
           $('div._Foo').bind("mouseover", function(e) {
               // Do something exciting
           });
        }
        </script>

    </ContentTemplate>
</asp:UpdatePanel>

desde pageLoad() es una ASP.NET ajax evento que se ejecuta cada vez que se carga la página en el lado del cliente.

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by: