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..
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);
});
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>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:
body for my event handlers: $('body').on('contextmenu', '#myctl', function(e) {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(...).