¿Cómo ejecutar una función después de que div ha perdido el foco?

Tengo varios divs que cada uno contiene un form . Cada uno de los formularios tiene dos fields input text . Estoy tratando de trigger una function después de que el div looses focus (es decir, no después de que uno de los campos de texto de entrada pierda el foco, sino que después de una forma totalmente nueva en el nuevo foco de ganancias del div)

 






Y aquí está el código jquery:

 $('#userInputID').children().blur(function(){ //some code })//end blur 

Básicamente, quiero que la función se ejecute cuando cualquiera de los divs con la clase col1, colx o col2 pierda el enfoque. El código de jQuery de arriba nunca se dispara. El enfoque no funciona porque se dispara después de que cada campo de texto de entrada pierda el enfoque, incluso si el mismo div todavía tiene el enfoque.

La documentación de .blur() lo llevaría a creer que puede usarla de esta manera; sin embargo, creo que debe activar explícitamente el desenfoque en un elemento que no es un elemento de formulario válido (por ejemplo, entrada, selección, etc.);

Vea este violín: http://jsfiddle.net/z7VYQ/

Basado en su comentario sobre la validación, este violín le muestra cómo determinar la forma enfocada actualmente y hacer ajustes a las otras formas.

Cómo disparar una función después de que el div ha perdido el enfoque (desenfoque)

Según las pruebas y en estas páginas 1 , 2 parece que el desenfoque no burbujea. Pero puedes usar una solución alternativa. Este violín actualizado muestra que funciona de acuerdo con mi comprensión de su pregunta:

  • para cada div que es un hijo del div id='userInputID'
  • crear un detector de eventos que se active después de que el div haya perdido el foco (desenfoque)

Si usa la función jQuery on() , puede capturar eventos de enfoque y desenfoque.

 $(document).ready(function() { $( "#userInputID" ).on( "blur", "div.onBlurTest", function() { $( this ).toggleClass( "hasFocus" ); $( this ).addClass( "hasLostFocus" ); $( this ).children("h2").text("Using on instead of blur"); }); }); 

Y el html

 

Using on instead of blur



Demostración en pleno funcionamiento en violín con actualización diciembre de 2013

Como Chris Rockwell señaló, mi anterior demostración de violín no funciona si se usa la tecla de tabulación. He creado un tenedor que funciona con la tecla de tabulación también

 $(document).ready(function() { // Handler for .ready() called. $( "#userInputID" ).on( "focus", "div.onBlurTest", function() { $( this ).toggleClass( "hasFocus" ); $( this ).removeClass( "hasLostFocus" ); }); $( "#userInputID" ).on( "blur", "div.onBlurTest", function() { $( this ).toggleClass( "hasFocus" ); $( this ).removeClass( "hasLostFocus" ); }); }); 

Y HTML simplificado

 

Por favor, hágamelo saber si tiene más preguntas.

Algunas citas

De la jQuery Api en blur

El evento blur no burbujea en Internet Explorer. Por lo tanto, los scripts que dependen de la delegación de eventos con el evento de blur no funcionarán de manera consistente en todos los navegadores. Sin embargo, a partir de la versión 1.4.2 , jQuery focusout esta limitación al asignar el blur al evento focusout en sus métodos de delegación de eventos, .live() y .delegate() .

    Intereting Posts