Get data-attributes with jQuery .class selector

Question

I want to trigger an onClick event for an entire class of elements. Normally, I would do something like this:

$(".classy").click(function(){
    console.log("Replace this line with something useful!");
});

However, every element of this class has distinct data-attributes that I want to use inside the onClick function. For example:

<div className="classy" data-num={100}></div>
<div className="classy" data-num={931}></div>
<div className="classy" data-num={777}></div>

On the click of each element, I would want to log the data-num value. Is there any way to do this with jQuery's .click?

so what you want is the data-num of the div you click right.? — Jithin Raj P R
– Jithin Raj P R, Commented Jul 12, 2017 at 14:38
The selector matches multiple elements, but the events don't get bound to the set as a whole, but to each individual element in that set. So triggering the event on one of those elements will not trigger the events on the other elements. Inside the function you will have one element that triggered the event, which is this. — vi5ion
– vi5ion, Commented Jul 12, 2017 at 14:51

Shiladitya · Accepted Answer · 2017-07-12 14:41:25Z

9

Here you go with the solution https://jsfiddle.net/Lk0pnu8e/

$(".classy").click(function(){
    console.log("First Way: " + $(this).attr('data-num'));
    console.log("Second Way: " + $(this).data('num'));
    console.log("Replace this line with something useful!");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="classy" data-num={100}>100</div>
<div class="classy" data-num={931}>931</div>
<div class="classy" data-num={777}>777</div>

edited Jul 12, 2017 at 14:41

answered Jul 12, 2017 at 14:38

Shiladitya

12.2k17 gold badges29 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jithin Raj P R · Accepted Answer · 2017-07-12 14:47:24Z

0

This will work fine for you -

$('body').on('click','.classy',function(){
   console.log($(this).attr('data-num'));
});

Am using the body so that even you add the div using AJAX(dynamically) the click will work.

edited Jul 12, 2017 at 14:47

answered Jul 12, 2017 at 14:41

Jithin Raj P R

6,8469 gold badges41 silver badges71 bronze badges

Collectives™ on Stack Overflow

Get data-attributes with jQuery .class selector

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related