Question

I have a table of buttons that are printed using PHP. Each button has a different value in its data attribute but does the same thing. I want the value of the data attribute of a particular button’s data attribute. This does not work:

$(this).find('button').data('myatt')

The above returns the first button’s data attribute value rather than the one the user clicked.

EDIT: jsfiddle to illustrate: http://jsfiddle.net/7fkfu/17/

Any ideas? Thank you :).

Answer 1

OK, the problem is in how you were trying to use the .on method: you were trying to say on().click(), but you don’t want both. The first param to .on() is a string indicatingthe event(s) you want to handle. Then a selector, an optional data param, and then last you put the actual handler. (There’s also an events-map format – see the .on() doco.) Also in the fiddle it was checking for buttons with [rel=modal] but in the html it was rel=test. Try the following:

$(function() {
  $('#mytable').on('click','tr button[rel=test]',function() {
     alert($(this).data('mydata'));
  });
});

An updated fiddle that works: http://jsfiddle.net/7fkfu/19/

Also, don’t create more than one element with the same ID. (Doesn’t affect your code in this case, but really it is invalid HTML and if you actually try to select elements by ID it will matter.)