How can you replace these onclick="..." attributes with cleaner jQuery style code?

Question

I have some code a little like this...

<img src="..." width="100" height="100" alt="" onclick="FlipImg(1234)" />

There are lots of these images on the page, each with a different id in the FlipImg() call.

I normally prefer to put this type of code into a bit of jQuery, maybe a little like this...

$("img").click(FlipImg(<id from somewhere?>));

However, I can't figure out where to store the id that I need to pass to the code (title is already being using to contain, well, the title of the image, and id is already being used for something else).

Can anyone suggest a way of getting my onclick code out of the html and into my javascript file where it belongs?

Answer 1

$("img").click(function() {
    FlipImg($(this).attr('class'));
});

You can do it this way and store the ID in the id tag of the image. To be valid HTML, IDs can't start with a number, so prepend it with something.

EDIT: I missed part of the question

<img src="..." width="100" height="100" alt="" class="img1234" />

Then do:

$("img").click(function() {
    FlipImg($(this).attr('class').substring(3));
});

Answer 2

whatever i understood ur question my solution is

html

   <img src="..." width="100" height="100" id="1234" />

javascript

jQuery('img').bind('click',function(e){
        FlipImg(jQuery(e.target).attr('id'));
      });

Answer 3

try:

<img src="..." width="100" height="100" alt="" onclick="FlipImg(1234)" rel="1234" />

and in jQuery:

$("img").click(function() { FlipImg($(this).attr("rel")); });

it should work

Answer 4

As with the other answers here, I'd recommend recycling another attribute in your document and using jQuery to extract the value. Which one you can use depends on the page doctype and how closely you want to follow the specs of that doctype. If you don't care about the doctype, then any of the answers I've seen to this question will work. If you do care, your choices are pretty few:

1. You can add a class to the image: <img src="..." class="flip1234" />
2. You can add a title to this image: <img src="..." title="Image 1234" alt="Alt text" />
3. You can add a hash to the image url: <img src="myimage.png#1234 />
4. You can wrap the image in an anchor but later kill the click: <a href="myimagescript.php?id=1234"><img .../></a>

Option 4 is only an option if you have a valid page to handle this sort of request. It's preferable to all of these solutions because it still allows users with JS off to see your content. And a few people really chafe at option 1 because they think it pollutes presentation with behaviour. I can totally see their point, but it's my personal choice.

Adding a custom tag is definitely an option, but you are required to produce your own DTD if you really, really care about validation.

Answer 5

I guess your query is about moving code out of the HTML. You could put an extra attribute, as Alin suggested. And then in js, loop through all the img tags to find out whether this attrib exists on the tag and only then bind the onclick to it. I am learning jquery at the moment, so wont write the code. If anyone can put it here, please do.