Why is jQuery on-click event handler not working properly for dynamic loaded DOM elements?

Question

I load my JavaScript file in the at my home page, then I navigate to the page where I need a onclick function. The onclick is attached to content that has been loaded dynamically over time via AJAX calls. The elements I try to reach are constructed like:

<a href="#" id="query_2" class="list-group-item query">Alle huurdergegevens</a>

And in my JavaScript file I wrote this:

$(".query").click(function() {
    var id = $(this).attr('id');
    id = id.replace(/\D/g,'');
    console.log(id);
    exeSQL(id);
});

When I click the element, literally nothing happens.. Nothing logged in the console, no errors aswell.. Can't figure out what I'm doing wrong tbh..

I think you having this issue because you have not put your onclick script inside document.ready function. — Rana Ghosh, Mar 07 '17 at 09:52
The problem is that since you load the content dynamically, your jquery code doesn't add the click events to the loaded elements. You'd need to attach the click listeners after you're done with loading the content, or then you can use the answer by Sagar Arora. :) — Fissio, Mar 07 '17 at 09:55

score 10 · Answer 1 · edited Mar 07 '17 at 09:55

10

when you load any element in DOM after DOM is created then you have to handle click event like this with using on

$(document).on("click",".query",function() {
    var id = $(this).attr('id');
    id = id.replace(/\D/g,'');
    console.log(id);
    exeSQL(id);
});

edited Mar 07 '17 at 09:55

Ameya Deshpande

3,580
4
30
46

answered Mar 07 '17 at 09:52

Sagar Arora

1,743
1
10
19

Thanks, this did it! Could you eloberate on how this works... ? – Laurens Mäkel Mar 07 '17 at 09:53
@LaurensMäkel because your content is loaded dynamically so in that case we have to use $(document) instead of direct selector element. – Sagar Arora Mar 07 '17 at 09:56
@LaurensMäkel, check the documentation for [jQuery.on() here](http://api.jquery.com/on/#direct-and-delegated-events). `When a selector is provided, the event handler is referred to as delegated.` --> `Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time.` – Fissio Mar 07 '17 at 09:59

score 1 · Answer 2 · answered Mar 07 '17 at 09:56

You have to use this syntax for events on dynamic content

$(document).on('click','.query',function() {
    var id = $(this).attr('id');
    id = id.replace(/\D/g,'');
    console.log(id);
    exeSQL(id);
});

See an example :

$(document).on('click', '#myButton', function(){
  alert('ok')
})

<html>
  <head>
  </head>
  <body>
    <input type="submit" id="myButton"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">         </script>
  </body>
</html>

score 0 · Answer 3 · answered Jan 05 '20 at 17:57

For anyone that stumbles across this like I did, the following is how I ended up here and also why the top answer solves the problem:

I was using body for my event handlers: $('body').on('contextmenu', '#myctl', function(e) {
My event handlers were bound to dynamic and static elements
The event handlers were working when in my main page
They stopped working when I moved them to an external JS file

The solution in the top answer solved my problem because it used $(document) to bind the event handlers instead of $('body').

Why?

The reason that moving to $(document) solves the issue is that $('body') doesn't actually exist in the external JS file. By using $(document), JQuery is able to attach the event handler to something that actually exists and the event handlers start working again.

Summary

If using event handlers (for statis or dynamic elements) in external JS files, use $(document).on(...) instead of $('body').on(...).

Why is jQuery on-click event handler not working properly for dynamic loaded DOM elements?

3 Answers3

Linked