从数据属性获取数据

Question

I set a data attribute for a user on a link like this

  <input type="button" class="btn" data-user={"user": "<%= @user.name %>"}  value="Start" id="game">

In the javascript function that listens for the click event, I did a console.log(e.target) and it printed the whole thing to the console.

<input type="button" class="btn" data-user={"user": "<%= @user.name %>"}  value="Start" id="game">

If I do console.log(e) ie with no e.target, it logs the jquery event, but the data attribute is undefined

data: undefined

I'm trying to pull the username from the data attribute but don't know how to get it from this

<input type="button" class="btn" data-user={"user": "<%= @user.name %>"}  value="Start" id="game">

and I don't know why data is undefined when I log just the event.

I'd be very grateful if you can assist me with this. Thanks in advance.

Answer 1

Your HTML is ... unique? Instead of this:

data-user={"user": "<%= @user.name %>"}

Try this:

data-user="<%= @user.name %>"

Then you can get the data with the standard jQuery .data() technique (since you mentioned jQuery):

var user = $('#game').data('user');

Answer 2

您可以按如下方式访问DOM对象中的数据：

var data = $(e.target).attr("data-user");