Using on() handler on dynamic elements not working

Question

I have a situation where an element loads on the page(dynamically added by some third party) and have defined certain event for that element.

Below is the code which mimics the same situation where the .on() is not working on an element which I am adding dynamically.

What can be the issue here?

// 1
$('#bhansa').click(function(){
  console.log('first');
})

// 2
$('.dom').on('click', '#bhansa', function(){
  console.log('second');
})

setTimeout(function(){
  $(".dom").html("<a href='#' id='bhansa'>Click me</a>");
}, 4000);

// 3
$('#bhansa').on('click', function(){
  console.log('last');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="dom"></div>

Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — peeebeee, Aug 17 '18 at 14:46

Zakaria Acharki · Accepted Answer · 2018-08-17T14:51:54.537

4

Use event delegation on the body tag to make sure the event will not be detached when you remove/add parts to you DOM structure :

$('body').on('click', '#bhansa', function(){
     console.log('second');
})

As @Taplar comment says if the element that you are delegating binding on is being created dynamically, you are binding too low and should bind on a higher parent that is not dynamic body.

edited Aug 17 '18 at 14:51

answered Aug 17 '18 at 14:40

Zakaria Acharki

63,488
15
64
88

It should be noted that this can be accomplished without jQuery as well by simply inspecting the event's `target` property. – Fissure King Aug 17 '18 at 14:46
Added your comment to the post @Taplar , thanks for your intervention. – Zakaria Acharki Aug 17 '18 at 14:46
@FissureKing, the OP already using jQuery so suggesting a vanilla JS solution may unuseful in this case. – Zakaria Acharki Aug 17 '18 at 14:48
1

@ZakariaAcharki, fair enough. A JavaScript tag was also present but your point is well taken. – Fissure King Aug 17 '18 at 14:50
Thanks, I'll mark this correct if it works for my usecase. – bhansa Aug 17 '18 at 15:18

dorintufar · Answer 2 · 2018-08-17T14:50:24.427

2

the problem is that if you remove dom component, all listeners are removed also.
Try to add listener this way:

$("body").on("click", "#bhansa", () => {console.log(123)})

edited Aug 17 '18 at 14:50

answered Aug 17 '18 at 14:39

dorintufar

538
6
20

score 0 · Answer 3 · answered Aug 17 '18 at 16:23

0

You can write like this also:-

$(document).find().on('click', '#bhansa', function(){
    //code
});

Here document is Dom object.

answered Aug 17 '18 at 16:23

Sanjeev Chauhan

74
5

I'm not sure if `find()` will work on dynamic element which is getting added later. – bhansa Aug 17 '18 at 17:42

Using on() handler on dynamic elements not working

3 Answers3