How do you use a click funciton that has a lot of classes in jquery?

Question

<div class="card-block">something</div>
<div class="card-block">something</div>
<div class="card-block">something</div>
<div class="card-block">something</div>
<div class="card-block">something</div>

So, I have something like this in my code, I was wondering how do add a click function that grabs the specific div that was clicked?

I thought this would work $('.card-block').on('click', function() { "do something" });

Ok, so I guess I forgot to mention my DOM is being build dynamically, and it's constantly being built dynamically every time the user clicks on a button, or resizes the window.

Use the `this` keyword to refer to the element that raised the event — Rory McCrossan, Oct 03 '16 at 11:17
What you've got should work, unless the dom is being built dynamically — David_001, Oct 03 '16 at 11:17
Yes, my DOM is being build dynamically. How do I fix it? I thought it was funny, cause i thought it should work — Eric Chu, Oct 03 '16 at 11:21
If your DOM is built dynamically you need to use a delegated event handler. See the question I marked as duplicate for more information — Rory McCrossan, Oct 03 '16 at 11:21

Akshey Bhat · Answer 1 · 2016-10-03T11:22:35.520

1

$('.card-block').on('click', function() { var div = $(this); });

You can use this keyword to get clicked div. In case your element is added dynamically, then use this code:

$('body').on('click', '.card-block', function() { var div = $(this); });

edited Oct 03 '16 at 11:22

answered Oct 03 '16 at 11:17

Akshey Bhat

7,901
1
18
20

score 0 · Answer 2 · answered Oct 03 '16 at 11:19

0

Your code should work, if it' doesn't it probably means that you're binding the click event when the element isn't there yet. Try to delegate the event to the body:

$('body').on('click', '.card-block', function(e) {
    var your_div = $(this);
});

answered Oct 03 '16 at 11:19

Jonas Grumann

10,058
2
18
37

score 0 · Answer 3 · answered Oct 03 '16 at 11:21

0

Use this. It will also attach click event for dynamically loaded elements having class card-block.

$(document).on('click','.card-block', function() { 
  var x = $(this);//It will be the appropriate div
});

answered Oct 03 '16 at 11:21

AB Udhay

633
4
9

How do you use a click funciton that has a lot of classes in jquery?

3 Answers3