How to attach click listener to a dynamically created child element using jQuery?

Question

I know that similar questions are being asked (like here) but, being a jQuery noob, I still can not attach a click listener to an a element within a li where the whole ul.li.a is dynamically appended to the DOM like this.

<div id="users-col">
  <!-- dynamically appended --> 
  <ul id="users-list">
       <li>
          <a class="user" id="Alice">Alice</a>
       </li>
       <li>
          <a class="user" id="Bob">Bob</a>
       </li>
  </ul>
   <!-- END dynamically appended --> 
</div>

Here is a (one of the many) jQuery functions that I have tried:

$('#users-col ul.li.a').on('click', '.user', (function () {
  console.log('user clicked:', this.id); 
});

How can I fix this?

li and a are not classes, so they shouldn't have . in front of them if you're trying to select them. Separate elements with > to indicate parent - child relationship. — CertainPerformance
– CertainPerformance, Commented Jun 6, 2018 at 6:15
Well, I also tried $("#users-col ul > li > a") but failed. — Karlom
– Karlom, Commented Jun 6, 2018 at 6:17
@Karlom $("#users-col ul > li > a") will not work since your ul li and a are dynamically created. — Kiran Shahi
– Kiran Shahi, Commented Jun 6, 2018 at 6:18

Nikhil Aggarwal · Accepted Answer · 2018-06-06 06:15:46Z

5

You need to bind the event on element that is available (not added dynamically)

$('#users-col').on('click', 'a.user', (function () {
  console.log('user clicked:', this.id); 
});

For reference, jQuery.on

answered Jun 6, 2018 at 6:15

Nikhil Aggarwal

28.5k4 gold badges46 silver badges61 bronze badges

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

Comments

Rafdro · Accepted Answer · 2018-06-06 06:30:02Z

0

in such case you must hook an event with parent of dynamically created children:

$('#users-col').on('click', 'a.user',        (function () { 
console.log('click bound'); 
});

answered Jun 6, 2018 at 6:30

Rafdro

8001 gold badge8 silver badges26 bronze badges

Comments

Daniel Lord · Accepted Answer · 2018-06-06 07:10:22Z

0

For convenience sake and reuse, I leave the first field just directly tied to the document:

$(document).on('click', '.user', (function () {
  console.log('user clicked:', this.id);
}));

<div id="users-col">
    <!-- dynamically appended -->
    <ul id="users-list">
        <li>
            <a class="user" id="Alice">Alice</a>
        </li>
        <li>
            <a class="user" id="Bob">Bob</a>
        </li>
    </ul>
    <!-- END dynamically appended -->
</div>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
    </script>

The listener is directly tied to the document vice the class, so now it is very easy to reuse this class dynamically across your entire document.

answered Jun 6, 2018 at 7:10

Daniel Lord

8027 silver badges18 bronze badges

2 Comments

Karlom Over a year ago

I had try this. Its problem was that it was triggered for whatever click on the page.

Daniel Lord Over a year ago

@Karlom no, it should only trigger for tags with class="user". Unless your body contains class user, it shouldn't trigger for every click.

Collectives™ on Stack Overflow

How to attach click listener to a dynamically created child element using jQuery?

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related