How to specify dynamic element in javascript on() function?

Question

I have approximately such structure:

<div class='container'>
 <div class='element' data-id='1'></div>
 <div class='element' data-id='2'></div>
 <div class='element' data-id='2'></div>
</div>

Where .elements' are rendered dynamically.

So I wrote handler for these elements:

jQuery('.container').on('click', '.element', function () { //code })

But I need to do something with element, which was clicked.

How could I get clicked element?

possible duplicate of How to create click event for specific link in a jQuery listview. — Omar
– Omar, Commented Jul 5, 2013 at 15:01

Tomalak · Accepted Answer · 2013-07-05 14:59:55Z

6

The clicked element will be this in your event handler function.

jQuery('.container').on('click', '.element', function () { 
    // use "this" or "jQuery(this)", depending on your needs
})

Note that this will point to a DOM element, in your case a <div>.

answered Jul 5, 2013 at 14:59

Tomalak

340k68 gold badges547 silver badges635 bronze badges

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

1 Comment

Kaetana Over a year ago

Thank you very much! So simple and evident answer and so helpful for me! Thanks for editing codestyle too.

putvande · Accepted Answer · 2013-07-05 15:00:26Z

1

You have to do something with the target of the event.

Something like :

jQuery('.container').on('click', '.element', function (event) { 
    var clickedelement = $(event.target);
    //code 
})

answered Jul 5, 2013 at 15:00

putvande

15.3k3 gold badges37 silver badges51 bronze badges

1 Comment

A. Wolff Over a year ago

Sorry, re-reading OP question, i think here effectively event.target is what OP is looking for

JohnJohnGa · Accepted Answer · 2013-07-05 15:03:59Z

0

HTML:

<div class='container'>
 <div class='element' data-id='1'/>
 <div class='element' data-id='2'/>
 <div class='element' data-id='2'/>
</div>

Javascript:

$(function () {
  $('.container').on('click', '.element', function () {
    $clickedElement = $(this);
    $data-id = $clickedElement.attr('data-id');
  });
});

answered Jul 5, 2013 at 15:03

JohnJohnGa

15.7k20 gold badges65 silver badges88 bronze badges

Collectives™ on Stack Overflow

How to specify dynamic element in javascript on() function?

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related