Foros del Web » Programando para Internet » Javascript »

onclickout

Estas en el tema de onclickout en el foro de Javascript en Foros del Web. Hola Estoy intentando con esto usando jquery, pero no funciona @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código HTML: Ver original < a onclick = "mostrar()" > Boton < / ...
  #1 (permalink)  
Antiguo 15/06/2017, 10:52
 
Fecha de Ingreso: julio-2014
Mensajes: 161
Antigüedad: 9 años, 9 meses
Puntos: 4
onclickout

Hola

Estoy intentando con esto usando jquery, pero no funciona

Código HTML:
Ver original
  1. <a onclick="mostrar()" >Boton</a><div id="AjaxCapa20"></div>

Código Javascript:
Ver original
  1. function mostrar(){
  2.     $("#AjaxCapa20").show();   
  3. }
  4.  
  5. $(document).on('click', function(e) {
  6.     if ( ! $(e.target).closest('#AjaxCapa20').length )
  7.          $('#AjaxCapa20').hide();
  8. });

Saludos

Última edición por Rebuilding; 15/06/2017 a las 15:09
  #2 (permalink)  
Antiguo 18/06/2017, 10:28
Avatar de manuparquegiralda  
Fecha de Ingreso: junio-2012
Ubicación: Barcelona
Mensajes: 241
Antigüedad: 11 años, 9 meses
Puntos: 39
Respuesta: onclickout

No te funciona porque al pulsar el botón estás llamando a la función mostrar() y a su vez al evento click del document. Como cuando pulsas el botón éste no está dentro de #AjaxCapa20 en realidad lo que estás haciendo es abrir y cerrar simultáneamente.

Tienes que parar la propagación del evento cuando pulsas el botón para que no se haga el del click en el document. Utiliza la consola del navegador, para el javascript es una herramienta fundamental que te habría dado la respuesta. Algo así debería funcionarte.

Código HTML:
Ver original
  1. <a id="openAjax20" href="javascript:;">Boton</a>
  2. <div id="AjaxCapa20">
  3.     HOLA
  4. </div>
Código Javascript:
Ver original
  1. $(document).on('click',"#openAjax20", function(e) {
  2.     e.stopPropagation();
  3.  
  4.     if( $("#AjaxCapa20").is( ":hidden" )) {
  5.         $("#AjaxCapa20").show();
  6.     } else {
  7.         $('#AjaxCapa20').hide();
  8.     }
  9. });
  10.  
  11. $(document).on('click', function(e) {
  12.     if ( !$(e.target).closest('#AjaxCapa20').length ) {
  13.         $('#AjaxCapa20').hide();
  14.     }    
  15. });
__________________
Diseño Web - Arisman Web

Última edición por manuparquegiralda; 18/06/2017 a las 10:33

Etiquetas: Ninguno
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:16.