This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 8 years ago.
So here is a question.
I have HTML
<a class="callback">Callback</a>
I have external Jquery-file (with Bootstrap.js included)
$(".callback").on('click', function() {
var myModal = '<div><a id="callback"></div>';
$(myModal).modal('show');
});
$("#callback").on('click', function() {
//some actions
});
So ".callback"-event works fine because that link we have in the current DOM.
But "#callback"-event does NOT work. Maybe cos of that element appears after JS-file has loaded (seriously?).
Please, could anyone answer why "#callback"-event does NOT work?
Thanks a lot!
You need to use jQuery's event delegation syntax for on() when binding to dynamically created elements:
$(document).on('click', "#callback", function() {
Related
This question already has answers here:
JavaScript click event listener on class
(8 answers)
Closed 3 years ago.
I am just trying to set up a simple addEventListener but it is giving me type error.
I've tried switching the order of my js but nothing seems to work.
// my script
const serviceContainer = document.getElementsByClassName("serviceImg-container");
serviceContainer.addEventListener('click', function(){
alert("Hellooo worlddd!!");
});
I prefer working with id's makes it easier because there can only be one Id.
<div id='serviceImg-container'><img src='someimage.com'/></div>
document.querySelector('#serviceImg-container').addEventListener('click', function(e) {
alert('hello world!');
}
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 8 years ago.
It is easy to add text in page after loading thanks to javascript but I would like to add a link with a link and be able to catch the click event without reloading page
$("#div").html("<a href='#' id='new'>new link</a>");
// not work, because no
$("#new").click(function(e) {
e.preventDefault();
alert('click');
});
Do you know if there is a way ?
replace
$("#new").click(function(e) {
e.preventDefault();
alert('click');
});
with
$(document).on('click','#new',function(e) {
e.preventDefault();
alert('click');
});
This question already has answers here:
jQuery click not working for dynamically created items [duplicate]
(8 answers)
Closed 8 years ago.
I search around the web but cant do this work..
Im creating a dialog in a js.file . In this js i have a function that creates a button, but with innerHTML...
var divButtons = document.getElementById('buttons_insert1');
var buttons_insert = "<button id='okcad' class='button_ok' value='' > <img src='/php/Images/OK.png' alt='OK' /> OK </button>";
divButtons.innerHTML = divButtons.innerHTML + buttons_insert;
and in the index.html i have a jquery function to get the click event.
$("#okcad1").click(function()
{
alert('hello world');
}
but this is not working..the event dont fire...
Someone could help me?
Regards!
Rafael S.
Use event delegation
$(document).on("click" , "#buttons_insert1 #okcad1" , function()
{
alert('hello world');
});
You need event-delegation, since you're appending it after DOM has been loaded. For that use jQuery.on
$("#buttons_insert1").on('click', '#okcad1', function() {
alert('hello world');
}
Just click will bind the event to the elements which were present in the DOM when the code got executed, so you need the technique of event-delegation.
This question already has answers here:
Dynamically adding a click handler in jQuery
(2 answers)
Closed 8 years ago.
I'm trying to fix an issue on the mobile navigation of this page:
http://tinyurl.com/kq9xs6h
The tags are dynamically created in a JS function:
mobile_advanced = menu.clone().attr({id:"mobile-advanced", "class":""}),
Which results in generating this HTML line:
<ul class="" id="mobile-advanced" style="position: absolute;">
The following code is working when using the browser console (so when the html has been generated):
jQuery('#mobile-advanced a').on('click', function() {
jQuery('body').removeClass('show_mobile_menu');
jQuery('body').removeClass('show_mobile_meta');
jQuery('body').css({'height':'auto'});
});
But when I insert it in my JS file, the event's handler is not understood.
Where should I put this piece of code or how do I need to modify it so the handler is taken into account?
What if you wrapped your code in doc ready?
jQuery( document ).ready(function() {
jQuery('#mobile-advanced').on( "click", "a", function() {
jQuery('body').removeClass('show_mobile_menu');
jQuery('body').removeClass('show_mobile_meta');
jQuery('body').css({'height':'auto'});
});
}
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 9 years ago.
I have the following code:
<script type="text/javascript">
$(function () {
$(".wrapper1").scroll(function () {
$(".wrapper2").scrollLeft($(".wrapper1").scrollLeft());
});
$(".wrapper2").scroll(function () {
$(".wrapper1").scrollLeft($(".wrapper2").scrollLeft());
});
});
</script>
But my HTML is dynamic and added later. Is there a way that I can use this code outside of the dynamically added HTML so that it works after the HTML is loaded ?
You can use event delegation. Use
$(document).on('scroll', '.wrapper1', function () {
instead of
$(".wrapper1").scroll(function () {
and similarly for all the dynamically loaded elements.
More info here
Take a look at the .on() property to delegate dynamically created elements.