Problema con click ()

[naggety]

Hola!

Estoy intentando hacer que un div con display:none se muestre al click en un enlace, y que se cierre haciendo click fuera de él.

Eso ya lo he conseguido, pero intento que se cierre sólo si haces click fuera, y no consigo que NO se cierre al hacer click dentro de dicho div.

Buscando la solución, encontré la función stopPropagation, que es precisamente la que necesito, pero no sé por qué, no consigo que funcione.

El código para cerrar es el siguiente

Código Javascript:

jQuery("html").click(function()
    {
        close_allowed_tags ();
    });
    jQuery("#form-allowed-tags").click(function(event)
    {   
        alert ("hola"); // esto es para comprobar que detecta que el click es dentro del div
        event.stopPropagation();
    });
 

La cosa es que tampoco funciona el "alert", por lo que el problema no está en el stopPropagation, sino en todo caso en el click() (supongo). Ninguna solución que he encontrado me ha servido, ya que todos los ejemplos que ponen son como mi código (o más bien mi código es como los ejemplos).

Gracias y un saludo.

[sneyder05]

Saludos naggety

La cosa es que tampoco funciona el "alert"

Entonces el problema radica en el selector que tienes(jQuery("#form-allowed-tags")), y si el evento no se dispara es porque ese control no existe o lo creaste por medio de AJAX o por JS, si ese es el caso, pues deberías usar live para registrar un evento.

[naggety]

Hola sneyder05, gracias por contestar.

#form-allowed-tags no lo creo con ajax ni JS. Está creado, pero oculto con CSS.

Posteriormente utilizo jQuery("#form-allowed-tags") para hacerlo visible, y funciona perfectamente. Lo hago con: jQuery("#form-allowed-tags").css("display","block").

De JS y jQuery sé poquito, así que no entiendo qué quieres decir exactamente con que el control no existe. En cuanto a lo de registrar un evento, tampoco sé a qué te refieres. ¿Podrías explicarme qué quieres decir con eso?

Muchas gracias.

[sneyder05]

Saludos naggety

utilizo jQuery("#form-allowed-tags") para hacerlo visible, y funciona perfectamente

Si es así, el control sí existe porque pudiste mostrarlo, entonces eso indica que el código donde registrar el evento click jQuery("#form-allowed-tags").click(function(event) no se está ejecutando.

PD: Cuando digo registrar un evento me refiero a crear el .click, .change u otra función.

[naggety]

Es decir, que ese .click(function(event) ES registrar el evento ??

Alguna idea de por qué no funciona?

Gracias nuevamente, un saludo.

[sneyder05]

Saludos naggety

Correcto, eso es registrar un evento.

Ahora, para determinar porqué no funciona tu código sería necesario ver el archivo completo y la estructura HTML que tienes, ya que la sintaxis de tu código está bien.

[naggety]

Hola otra vez.

He conseguido que funcione, pero estoy muy extrañado. He hecho lo siguiente:

Código Javascript:

function no_propagation (e)
    {   
        //alert ("hola");
        e.stopPropagation();
    }
 

Y en el div en cuestión he puesto un:

Código HTML:

onClick="no_propagation(event);"
 

Como digo, así ya funciona, pero no entiendo por qué de la otra forma no....

[sneyder05]

Saludos naggety

Te funciona porque has hecho el evento in-line, es decir registraste el evento cuando creaste el elemento en el HTML, cosa que usando jQuery sería mala programación.

[naggety]

¡Hola! ¡Ya está solucionado!

Como de costumbre, era una tontería. Efectivamente, como tú decías ¡el elemento no existía!.

Había puesto el código JS justo antes que el div, con lo cual el navegador intentaba registrar un evento a un div que aún no existía (se iba a crear justo después).

Registrando el evento después de haber cargado todo el documento, ya funciona:

Código Javascript:

jQuery(document).ready( function () {
    jQuery ("#form-allowed-tags").click( function(event) {
        alert ("hola");
        event.stopPropagation();
    });
});
 

El motivo por el que podía mostrarlo, es que no lo hacía registrando un evento en ese div, sino modificando una propiedad CSS suya, y el evento disparador estaba en un botón aparte.

Gracias por tu ayuda, un saludo.

[sneyder05]

Saludos naggety

Que bien que se haya solucionado.

Para simplificar el código puedes usar $ en vez de jQuery

[naggety]

Saludos sneyder05.

Hasta ahora siempre usaba $, pero por algún motivo, no me funciona. La consola web me dice '$ is not a function'.

Un saludo.