0

Al intentar mostrar un div:

    <div class="modalHome">
      HOLA MUNDO
    </div>`

    $(".modificar-foto-perfil").on("click", function() {            
       $('.modalHome').show();      
    });

    <i id="modificar-foto-perfil" class="fa fa-pencil fa-sm" aria-hidden="true" title="Modificar imagen"></i>

    .modalHome {
        position: absolute;
        display: none;
    }

No muestra el div, no se si tiene algo que ver la etiqueta

2
  • Si le quitas la clase despues de esta sentencia $('.modalHome').show(); el 19 dic. 2018 a las 14:04
  • 1
    la asignacion del evento click esta mal , esta puesto sobre una clase cuando quieres ponerla sobre un identificador, $(#modificar-foto-perfil) en vez de $(.modificar-foto-perfil)
    – dani t
    el 19 dic. 2018 a las 14:06

3 respuestas 3

3

Prueba con el siguiente código:

Captura con "#" el elemento "modificar-foto-perfil", básicamente es sólo eso:

$(document).ready(function(){
   $("#modificar-foto-perfil").click(function() {            
    $(".modalHome").show();
  });
});
.modalHome {
   position: absolute;
   display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modalHome">
  HOLA MUNDO
</div>
<br/>
<i id="modificar-foto-perfil" class="fa fa-pencil fa-sm" aria-hidden="true" title="Modificar imagen">CLICK</i>

2

Estas llamando mal al evento, lo estas llamando como clase .modificar-foto-perfil cuando en el i lo tenes declarado como ID id="modificar-foto-perfil", tenes que llamarlo con #: '#modificar-foto-perfil'

<style>
 .modalHome {
 position: absolute;
 display: none;
}
</style>
<div class="modalHome">
HOLA MUNDO
</div>
<br>
<!--  Aca tenes el ID al que al darle click inicia el evento de mostrar el div -->
<i id="modificar-foto-perfil" class="fa fa-pencil fa-sm" aria-hidden="true" title="Modificar imagen">CLICK</i>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>

<!-- Pero aca lo estabas llamando como clase con el . tenes que ponerle el # -->

<script>
$("#modificar-foto-perfil").on("click", function() {            
	$('.modalHome').show();     
});
</script>

0

Pues tenéis razón pero en mi código eso no funcionaba de ninguna manera, le estuve dando vueltas porque tenía otro div idéntico y en ese funcionaba, después de mirar mucho renombrar elementos, usar id o class, cambiando elementos de sitio, etc y buscar por internet encontré esto:

$(document).on(“click”… not working?

$(document).on("click","#test-element",function() {
    alert("click");
});

Gracias por la ayuda.

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.