.click no me sirve al recargar con .load

[oscarbt]

Hola a todos, estoy usando .load para consultar a mi base de datos y hasta ahi todo bien..
Tengo la siguiente tabla:

Código HTML:

<table id="result-data-user"  class="tables">
<tr class="class2_center"><td colspan="3" >Buscar <input type="text" size="35" id="text-find-user" /></td></tr>
<tr><td>Valor 1</td><td>Valor 2</td><td><img  src="imagenes/detalle.png" class="det-usu-reg" alt="detalle_1" /></td></tr>
<tr><td>Valor 3</td><td>Valor 4</td><td><img  src="imagenes/detalle.png" class="det-usu-reg" alt="detalle_2" /></td></tr>
</table>
 

Y con jquery obtengo el valor del alt de la imagen asi:

Código Javascript:

$("img.det-usu-reg").click( function(){ 
var valor = $(this).attr("alt");
});
 

El campo con id text-find-user ejecuta una funcion que usa .load:
y recargo la tabla con id result-data-user

El problema es que cuando recargo los datos en esa tabla ya la funcion de jquery
con la cual obtengo el valor del alt de la imagen no funciona... Porque puede pasar eso ?... es decir al abrir el archvo funciona todo, pero al recargar ya la funcion no sirve...Agradezco me puedan dar alguna indicación

[ryugen]

Lo que creo que te debe estar pasando es que cuando ejecutas load estás cambiando el DOM al cual esta "bindeado" el evento. Al desaparecer el nodo que tiene el evento ya no se ejecuta más tu función.

Lo que tendrías que hacer en la función load o posteriormente a su finalización "rebindear" los eventos, en tu caso:

Código Javascript:

$("img.det-usu-reg").click( function(){ 
var valor = $(this).attr("alt");
});
 

Con eso creo que bastaría, cualquier cosa no dudes en consultar

[diurno10]

creo que es porque estas cargando la tabla por ajax, por lo tanto cualquier evento que quieras disparar no va a reaccionar porque el dom ya se cargo anteriormente, asi que hace esto

$("img.det-usu-reg").live('click' , function(){
var valor = $(this).attr("alt");
});

ahora va a reaccionar, tanto cuando se cargue el DOM como asi tambien cuando cargues la tabla por ajax.

[oscarbt]

Listooo muchas gracias...

[alberto510a]

Hola.

No te funciona debido a que al usar load() estas creando elementos de alguna forma dinámicamente esto hace que no puedas usar los métodos habituales para hacer cosas.

Debes usar el método on() que sirve para atribuir eventos a elementos creados dinámicamentes perdona diurno10 pero esto ya me paso a mi jeje y live() está demasiado antiguado y ya está en desuso aunque funcione.

Tras el load deberías ejecutar una función callback con este método que te cuento. Quedaría así más o menos:

Código:

/* Supongamos que tenemos un div creado previamente (no se crea dinámicamente) donde se va a cargar la información del .load() */

$('#midiv').load('ejemplo.html',function{   

/* Hemos cargado en midiv las imagenes que querías y le hemos agregado una función callback que se va a ejecutar */

/* Cuando se usa on() se debe atribuir este método a un elemento padre que no haya sido creado dinámicamente yo usaré el elemento con id midiv que me inventé yo. */

$('#midiv').on('click','.det-usu-reg',function() {

var valor = $(this).attr("alt");

/* En este último paso hemos hecho lo que previamente dije, es decir, nos valemos del elemento midiv que va a ser el padre de nuestras imagenes creadas dinámicamente para agregarle un evento click a estas y la función que tendrán al realizarse */
});

});

Espero que te haya servido si tienes algun problema me comentas.

[oscarbt]

Bueno realmente con on si tengo problema

Supuse que de la siguiente forma funcionaria:

Código Javascript:

$("img.det-usu-reg").on('click' , function(){
    var valor = $(this).attr("alt");
});
 

Si no tengo un div en mi archivo que sea el padre de img, entonces como puedo utilizar el on ??

[oscarbt]

Claro esta que de la siguiente manera si sirve:

Ya q tengo la imagen dentro de una tabla y esa tabla tiene un id entonces lo coloco asi:

Código Javascript:

$('#result-data-user').on('click','.det-usu-reg',function() {
var valor = $(this).attr("alt");
});
 

Es correcto de esa forma ?

[alberto510a]

Dime sobre que lanzas el load() lo ejecutas en el body? es decir la información que tu cargas con el método load() donde aparece dentro de que?

[alberto510a]

a ver que vamos escribiendo a la vez jeje

necesitas aplicar el método on sobre un elemento que esté desde el inicio en tu código y no lo traigas dinámicamente con el .load()

queda asi:

$('#elemento_no_cargado_dinamicamente').on('click' ,'elemento_que_aparecera_dentro_de_este_dinamicame nte', función callback)

[oscarbt]

Código Javascript:

$('#result-data-user').on('click','.det-usu-reg',function() {
var valor = $(this).attr("alt");
});
 

Asi me sirvio.....
Entonces seria solo colocar el id del elemento padre y listo ?

[alberto510a]

si de esa forma te sirvió significa que la tabla no la traes dinámicamente y estaba desde el principio en tu código.

nota: no uses $(this), ya que te estás refiriendo a la tabla no a la imagen (O ESO CREO)

[oscarbt]

Pues el $(this) lo uso porque al atributo alt es el de la imagen...no seria necesario entonces ?

[ryugen]

Iniciado por oscarbt

Código Javascript:

$('#result-data-user').on('click','.det-usu-reg',function() {
var valor = $(this).attr("alt");
});
 

Asi me sirvio.....
Entonces seria solo colocar el id del elemento padre y listo ?

Esta forma es la correcta, porque lo que estas haciendo es una "delegación" del evento. Estas diciéndole al padre que cuando un hijo con la clase "det-usu-reg" ejecute la función que estas nombrando.

Como bien apuntaron esto es posible ya que cargas los datos de la tabla por ajax, pero la tabla existe previamente en el DOM.

En cuanto al $(this) en este caso está bien usado porque hace referencia al elemento que estas clickeando.


Saludos y espero haberte aclarado

[alberto510a]

Te decía lo del $(this) porque creía que en ese lugar se refiere a la tabla.
Y en su lugar pusieras $('.det-usu-reg')

Pero como bien te acaban de decir esto no es así, así que déjalo con el this si quieres.