detectar click dentro de un div cargado con load (jquery)

[taka2]

hola gente del foro

tengo este problema

cargo un pagina con load y la pongo dentro del div con id "comparativa"
que está vacio
la pagina es una tabla con datos (comparativos que varian segun la seleccion del usaurio) dentro de ese div
hasta acá perfecto

Código HTML:

<div id="comparativa"></div> 

el load llamó a una página que cargó dentro de comparativa una simple tabla

Código HTML:

<table>
  <tr>
     <td></td>
     <td>1 Color</td>
     <td>2 Colores</td>
  </tr>
  <tr>
     <td>1 cara</td>
     <td opcion="1">$4.75</td>
     <td opcion="2">$5.75</td>
  </tr>
  <tr>
     <td>2 Caras</td>
     <td opcion="3">$6.75</td>
     <td opcion="3">$7.75</td>
  </tr>
</table> 

lo que quiero hacer es que cada vez que el usuario presiona sobre un "<td>" de la tabla que contenga precio detecte que "<td>" se está presionando
por eso le agregué el atributo "opcion"


y agregué estas lineas al código de la pagina principal para probar,
pero no funciona

Código HTML:

$('#comparativa td[opcion]').click(function(){
	alert('Hice click sobre' + $(this).attr('opcion'));
});

pruebo con esto para ver si el click sobre el div lo detecta el click y sí funciona

Código HTML:

$('#comparativa').click(function(){
	alert('Hice click sobre div comparativa');
});

pero necesito detectar el click sobre el td de la tabla que se cargó dentro de ese div, y no sobre el div



como podría resolverlo?


espero que me haya explicado bien
como siempre muchas gracias
saludos
gustavo

[jtoribioa]

Bueno ese error se me presentaba a veces cuando creaba elementos HTML con DOM. Me imagino que se debe a la asignación de los eventos, a esto viene un montón de teoría sobre como jquery asigna los eventos y como se comportan dichas asignaciones, algún día lo explicare.
Lo que puedes hacer es asignar los eventos después de llamar la tabla con load, es decir pones tu código de .click dentro del la función callback de load.

Aquí un ejemplo:

Código HTML:

$("#compatariva").load("tabla.html",function(){
   $('#comparativa td[opcion]').click(function(){
	alert('Hice click sobre' + $(this).attr('opcion'));
   });   
});

No recuerdo si es necesario especificar los parametros responsetext httpreques en el function, pero prueba con eso sino funciona revisas las referencias de jquery.http://docs.jquery.com/Ajax/load#urldatacallback

Saludos :)

Olvide recomendarte que no uses atributos creados por ti, puedes usar el title en ves de "opcion".

[arthpix]

Te falto declarar una variable y como bien dice jtoribioa no debes usar atributos inexistentes por que aruinan tu markup.

Debes asignar dos atributos a las celdas que te interesan, uno de donde localizarla y uno de donde asignar el dato que deseas mostrar asi:

Código HTML:

<script type="text/javascript">
	$(document).ready(function(){
              // Usamos la función each para que cada elemento de clase "datos" ejecute la función por si mismo
		$("td.datos").each(function(){
                      // Definimos una variable valor usando como dato el atributo title
			var valor = $(this).attr("title");
                      // ejecutamos la función click sobr el elemento que estamos clickando
			$(this).click(function(){
                               // Y construimos la sentencia de la alerta con la variable valor
				alert("Hice click sobre: " + valor);
			});
		});
	});
</script> 

Tu html sería asi:

Código HTML:

<table>
	 <tr>
		 <td></td>
		<td>1 Color</td>
		 <td>2 Colores</td>
	 </tr>
	  <tr>
		 <td>1 cara</td>
		 <td class="datos" title="1">$4.75</td>
		 <td class="datos" title="2">$5.75</td>
	 </tr>
	 <tr>
		<td>2 Caras</td>
		<td class="datos" title="3">$6.75</td>
		<td class="datos" title="4">$7.75</td>
	</tr>
</table>