[SOLUCIONADO] Si .live ya no funciona en jQuery, que debemos usar?

[richardinj]

Hola, tengo un problema.. he usado el evento .live y ya no funciona... peor al usar on() tampoco funciona...

Les explico, tengo lo siguente:

Código HTML:

<script>

    $(document).ready(function(){
        
           $("#dato").html("<a href='#' id='pintar'> Pintar  </a>");
  

           $("#pintar").on("click", funcion(){   $(this).css("color","#0000FF"); } );



}):

</script>

<div id="dato"></div>

Al cargar el documento inserto con jquery un html.. luego al hacer click en pintar se debería pintar... con jquery 1.7 funciona con .live pero con el 2.0 ya no funciona live, ni on... parece que cuando llamas con ajax o creas un html dinamico ya no funciona el click...

Como solucionar este problema?

Saludos...

[pzin]

En realidad si funciona. Tal vez sea más bien un problema de CSS, ya que aunque le pongas un color, al ser un enlace se sobreescribe esa información de color. Prueba a cambiar color por alguna otra propiedad y verás que funciona bien.

[GatorV]

Lo que pasa es que la idea de on es que lo hagas sobre el selector padre, suponiendo que tienes un html así:

Código HTML:

<div id="parent">
      <div class="childs">foo</div>
      <div class="childs">foo</div>
      <div class="childs">foo</div>
</div>
 

Si antes lo que hacías era por ejemplo:

Código Javascript:

$('.childs').live('click', function() {
    $(this).css('background-color', 'red');
});
 

Al insertar/cambiar/borrar ".childs" usando AJAX o algún otro método funcionaba, no era lo adecuado, lo correcto es usar delegate:

Código Javascript:

$('#parent').on('click', '.childs', function() {
   $(this).css('background-color', 'red');
});
 

Así el evento solamente cae en el parent, y no tiene que estar inspeccionando usando live lo cual es más lento, es por eso que el uso de live() ya no se recomienda, porque traía una carga y lentitud que on ya no tiene.

Saludos.

[richardinj]

Hola a todos, gracias por sus respuestas...

he probado lo siguiente y aun no me funciona...

<script>

$(document).ready(function(){

$("#dato").html("<a href='#' id='pintar'> Pintar </a>");


$("#pintar").on("click", funcion(){ alert('Hola'); } );



}):

</script>

<div id="dato"></div>

No muestra el mensaje "Hola"...

[PHPeros]

Oye, pues utiliza bind() que es para versiones anteriores a 1.7 y no está deprecada

[richardinj]

estoy usando el 2.0

[PHPeros]

Ok, SOLO UN DIMINUTO DETALLE... Se escribe function NO funcion !!!!!

$("#pintar").on("click", funcion(){ $(this).css("color","#0000FF");

Además lo repites en todo el code y te olvidas alguna llave.

Gracias por el pasatiempo, me lo he pasado muy bien

[richardinj]

si, lo correjí, pero al final era un problema con FIREFOX