jquery how to get the title attr?

Question

i have a simple example:

<a id="my_videos" href="#" title="123"><img src="http://placehold.it/350x150"></a>
<a id="my_videos" href="#" title="223"><img src="http://placehold.it/350x150"></a>
<a id="my_videos" href="#" title="323"><img src="http://placehold.it/350x150"></a>

$('#my_videos').live('click', function() {
    var ide = $('#my_videos').attr('title');
    alert (ide);
});

what happens is that every time i click on the link the same value pops up 123

what am i doing wrong?

thanks

here is a jsfiddle

Answer 1

Rename id="my_videos" to class="my_videos". IDs should be unique. Then, use this inside the event listener, to refer to the just-clicked element.

<a class="my_videos" href="#" title="123"><img src="http://placehold.it/350x150"></a>
<a class="my_videos" href="#" title="223"><img src="http://placehold.it/350x150"></a>
<a class="my_videos" href="#" title="323"><img src="http://placehold.it/350x150"></a>

$('.my_videos').live('click', function() {
    var ide = this.title;
    alert (ide);
});

For this case, Vanilla JavaScript is more clear. If you want to use jQuery to get the title, use:

var ide = $(this).attr('title');