Question

I have a table with multiple rows that all have the same class. When an image is clicked, there’s a db call then returning json. I have everything working correctly but when I click the image, ALL in the table change. I would only like the current row image to be affected.

Example Table:

<tr class="changerow"> 
<td><a href="" class="hide"><img src="image.png" class="someimage" /></a></td>
<td><a href="" class="hide"><img src="image.png" class="someimage" /></a></td>
<td><a href="" class="hide"><img src="image.png" class="someimage"  /></a></td>
</tr>

Jquery:

$('.hide').live('click',function(){
var row=$(this);
$('.someimage').attr("src","newimage.png");
});

So, I know I need to somehow identify the current row and create the variable “row”. Not exactly sure how to do this. Was thinking using row.parents(‘.changerow’) or something like that. Help please 🙂 Thanks!

Answer 1

Try this

$('.hide').live('click',function(e){
   $('.someimage', this).attr("src","newimage.png");

   //Closest row
   var $row = $(this).closest("tr.changerow");
   e.stopPropagation();
});