Question

I have some <li> items appended by jQuery $.getJSON function.

for example:

<ul>
<li><input type="image" name="click_this" value="SOMEUUID" />FOO</li>
<li><input type="image" name="click_this" value="SOMEUUID" />BAR</li>
</ul>

and I want make sure when I click on one of above images, I can got it’s value.

I make follow script:

for (e=0; e<$('input[name="click_this"]').length; e++) {
  $('input[name="click_this"]')[e].click(function(){
     console.log($('input[name="click_this"]')[e].value);
  });
}

But when I load this script, before I click it display all values in my console…
How can I make this thing right?
Thank you very much.

Answer 1

Inside the callback, this refers to the one that was clicked. So just ask it for the value.

$('input[name="click_this"]').click(function(){
    console.log($(this).attr('value'));
});