Foro

Home Forums Frameworks y librerías jQuery Mobile Evento click dejó de funcionar

This topic contains 7 replies, has 3 voices, and was last updated by Ángel Luis Sánchez Ángel Luis Sánchez 4 años, 6 meses .

Viendo 8 respuestas - de la 1 a 8 (de 8 en total)
  • Evento click dejó de funcionar

    Intervenciones
  • Ángel Luis Sánchez
    Ángel Luis Sánchez 
    Participant

    Buenas a todos,

    estoy terminando ya el proyecto en el que estoy inmerso desde hace meses, y cual ha sido mi sorpresa al ver que el evento click (lo utilizo sobre un label) me dejo de funcionar de repente, ni siquiera poniendo esto:

     Code: javascript (select
    1.
    2.
    3.
    4.
    5.
    6.
    7.
    8.
    9.
    10.

    $(document).ready(function() {
      document.addEventListener("deviceready", init);
      document.addEventListener("offline", function() {
        navigator.notification.alert("Acabas de perder la conexión a internet", null, "Sin conexión", "Aceptar");
      });
    });

    $(document).on( "click", "label", function() {
      alert("hola");
    });

    El label lo añado dinamicamente:

     Code: javascript (select
    1.
    2.
    3.
    4.
    5.
    6.
    7.
    8.
    9.
    10.

    for(i in datos["tareas"]){
      nombres3 += "<li>"+
            "<a href="#"></a>"+
          "<div id="">"+
            "<p>Nombre:</p>"+
                  "<p>Descripción:</p>"+
            "<div><label><input type='checkbox'>Iniciada</label></div>"+                   
          "</div>"+
        "</li>";
    }

    Como podéis ver, lo añado en un popup. El evento click me funciona bien si el label no va dentro del div, pero si esta dentro no funciona. Y otra cosa rara es que a veces funciona (1/20 veces que haces click) y otras no.

    En Ripple Emulator no me funciona y en el móvil tampoco, pero … SÍ en el navegador chrome sin ripple! Tiene que ser por algo de los eventos que modifiqué, pero no veo el fallo por ningún lado.

    Espero que me podáis echar una mano.

    Saludos!


    IMK
    IMK 
    Participant

    Bueno al ver su código abre un label y después inserta un input del tipo checkbox, es probable que al darle clic este dandole clic al input y no al label pues recordemos que label es un elemento inline que no tiene un alto y ancho predefinido como un elemento block, una prueba sencilla seria crear un log o alert en el input para ver si este se dispara.


    Jose Jesus Perez Rivas
    Jose Jesus Perez Rivas 
    Keymaster

    Hola a todos, el comentario de IMK es muy acertado, es posible que simplemente el label no esté con suficiente espacio como para acertar, intenta cambiarlo por un div y aplícale un algo y ancho a ver que tal ;)

    Ángel intenta cambiando el código por este:

     Code: arbitrary (select
    1.
    2.
    3.
    4.
    5.
    6.
    7.
    8.
    9.
    10.

    for(i in datos["tareas"]){
      nombres3 += "<li>"+
            "<a href="#"></a>"+
          "<div id="">"+
            "<p>Nombre:</p>"+
                  "<p>Descripción:</p>"+
            "<div><div onclick="showAlert()" class="miclase"><input type='checkbox'>Iniciada</div></div>"+                  
          "</div>"+
        "</li>";
    }

     Code: arbitrary (select
    1.
    2.
    3.

    function showAlert(){
    alert('entro');
    }

     Code: arbitrary (select
    1.
    2.
    3.
    4.
    5.
    6.

    .miclase{
    float:left;
    width:100px;
    height:30px;
    line-height:30px;
    border: 1px solid #000}

    A ver si te aparece la alerta asignada a la función ;)


    Ángel Luis Sánchez
    Ángel Luis Sánchez 
    Participant

    Buenas josé, de ese modo si entraría lo que pasa es que me fastidia toda la función que tenía creada para cuando pulsabas el label.
    ¿No hay alguna manera de agrandar el tamaño del input checkbox? Porqué probé con todo y en el emulador del navegador se ve bien si hago cambios, pero al pasarlo al móvil e ve super pequeño ponga lo que ponga, alguna idea?


    Jose Jesus Perez Rivas
    Jose Jesus Perez Rivas 
    Keymaster

    La idea es crear un checkbox con fuentes, osea simularlo como hace ionic.

    Puedes utilizar su fuente -> http://ionicons.com/

    Tendrás que crearte un span, label, div o lo que quieras y asignarle una clase de esa tipografía que haga que aparezca un check sin marcar, luego al pulsar cambias la clase y listo!

    Saludos!


    IMK
    IMK 
    Participant

    Bueno no entiendo ¿por que coloca un checkbox dentro del label?, si bien no es incorrecto (según la W3C) pero si poco practico, la finalidad del label es relativa a la usabilidad (al darle click/tap se selecciona el input en cuestión), pero bueno, lo que puede hacer es crearle ya sea un id o una clase al checkbox y a partir de ahí le aplica estilo (CSS) a dicha id o clase, según haya definido.


    Ángel Luis Sánchez
    Ángel Luis Sánchez 
    Participant

    lo del checkbox lo hacía para dar una mejor visualización y que pareciese un botón, si la cosa es que me funcionaba pero nose que paso que de repente dejó de funcionar, intente tirar de backups anteriores pero nada.

    Estoy haciéndolo como ha indicado José, con iconos, pero utilizo los de fontawesome. Si por ejemplo tengo esto:

     Code: arbitrary (select
    1.
    2.

    <span class='fa fa-square-o></span>
    <span class='fa fa-check-square-o></span>

    El primero sería cuando no esta checkeado y el segundo cuando sí. La cosa es que intento cambiarles la clase, pero me desaparece al borrarle la clase que tiene y cambiarsela por otra. Simplemente utilizo las funciones de jquery removeClass() y addClass().

    ¿Hay alguna forma de hacerlo bien? Sin que me desaparezca el icono por completo, es decir, hacer un replace de la clase.


    Ángel Luis Sánchez
    Ángel Luis Sánchez 
    Participant

    Na perdonar por la tontería de la pregunta, pero es que estoy últimamente que no doy pie con bola. Con poner

    1.  $(this).attr("class","fa fa-check-square-o");

    Muchas gracias por la ayuda y vuestro tiempo chicos!


Viendo 8 respuestas - de la 1 a 8 (de 8 en total)

You must be logged in to reply to this topic.

📆 Adobe Spectrum CSS, una librería Open Source de componentes web y app. 👉 https://t.co/HNHFyP83CU #PhoneGap #Adobehttps://t.co/jhqMGA60jt08:55 AM Feb 10th