Lista abierta del botón jQuery, lista cerrada cuando se hace clic fuera

Sé que hay una docena de preguntas sobre esto en SO, pero ninguna parece funcionar para mí. Lo que estoy intentando es el siguiente código:

jQuery('.mybutton').click(function(){

  jQuery('.list').show().bind('click', function(event){
    event.stopPropagation();
  });

  jQuery('html').bind('click', function() {
    jQuery('.list').hide();
  });
});

El elemento de la lista nunca se abre. El clic de enlace html siempre se activa.

preguntado el 06 de noviembre de 11 a las 15:11

¿Podemos ver el HTML, tal vez haya un problema allí? -

¿Hay alguna razón para usar bind aquí? ¿Puede usar directamente hacer clic y verificar?

2 Respuestas

En lugar de atar el click de las personas acusadas injustamente llamadas html y .list, vincularlo globalmente y verificar si el objetivo actual es (un hijo de) un .list elemento.

jQuery('.mybutton').click(function(){
  jQuery(window).click(function(event) {
       var $elem = $(event.target)
       if($elem.hasClass('list') || $elem.parents('.list').length == 0) return;
       jQuery('.list').hide();
   });
});

respondido 06 nov., 11:19

Realmente no debería haber eventos vinculantes al hacer clic de esa manera. En su lugar, prueba algo como esto.

jQuery('.mybutton').click(function(e){
  jQuery('.list').show();
   e.stopPropagation();
});

jQuery('body').click(function() {
  jQuery('.list').hide();
});

jQuery('.list').click(function(e){
  e.stopPropagation();
});

Creo que el problema principal es que también necesita una llamada stopPropagation en su controlador de clic mybutton.

respondido 06 nov., 11:19

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.