Getting AJAX content into the DOM or registering an object with jQuery via an onClick event?

Question

I have a code setup something like below, the image is part of a block of HTML and is being loaded with AJAX so I can't get a direct handle on it using it's class or id, so I'm passing the object into a function and then picking it up with jQuery from there.

I don't like this method, is there any way of registering the image (or preferably the whole HTML block) with the dom so I can get a direct handle on it with jQuery and be able to do something like "$(".img").click(function(){});" or is there a more elegant way of doing what I'm trying to do below.

My HTML Page:

<img src="m.jpg" onClick="vote(this);" class="img">

My JS page:

function vote(object)
{
    //alert('voted');
    $(object).css('display','none');
}

Thanks guys.

Edit: Thanks everyone who answered, +1 to all. I'm not sure who said it first, but it solved everything. Cheers.

Answer 1

I think the JQuery live function should sort this out for you - you could attach a click to all images of the specific class and it should reapply as the DOM is reloaded when the image is downloaded.

JQuery live function

Answer 2

$(document).ready(function() {
   $('.voteImg').live('click', function() {
      //alert('voted');
      $(this).hide();
   });
});

Answer 3

Maybe something like

$('img.img').live('click', function() {
    $(this).css('display', 'none');
});