This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 3 years ago.
I have a multiple checkboxs loaded from another file by ajax with class 'chk-bx'
<script>
$('.chk-bx').on( "click", function(){
alert("checked");
});
</script>
There are some checkboxes that are there beore loading ajax then its working fine. but after loading its not working.
Thanks you verymuch
The event handler is initialized before the checkboxes get to the DOM. You have to initialize the handler on the new checkboxes after they appeared in the DOM.
Edit: As Rory said, you can use a delegated event handler. You can attach the handler to a common parent of your checkboxes, like $( "#checkbox-container" ).on( "click", ".chk-bx", function() {...}). That way the newly added checkboxes in the #checkbox-container element will have that listener ran on a click event. You can read more about it here: https://learn.jquery.com/events/event-delegation/
Related
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 2 years ago.
I am injecting some html strings to create buttons, however they jquery events don't fire after they have been created. I was told they needed to be "initialized" but cannot find an example.
$('#parent_div).html(<div class="clickable-button">click me here</div>);
will create:
<div id='parent_div'>
<div class="clickable-button">click me here</div>
</div>
And my usual jquery doesn't fire when clicked.
$('.clickable-button').on('click', function (){
console.log('clicked');
}
I got it to work by using a parent that existed before the injection with on()
$('#parent_div').on('click', '.clickable-button', function(){
console.log('clicked');
}
But it seems like there should be a better way to handle this because I don't always know what the parent is and I don't want to hard code new jquery every time I inject something. How do people usually handle this problem?
You can listen at the document level in that case you dont know whats the parent element
$(document.body).on('click', '.clickable-button', function(){
console.log('clicked');
}
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 5 years ago.
I have a link on my page, that if clicked, will generate a popup via Ajax. (The popup code is not under my control)
Now i want to Add functionality, via my code jQuery, on a link of this popup.
This popup is not printed in source code after page is loaded. Obviously the jQuery can't find this link.
How can i do, to add a click() trigger functionality on this link in this ajax popup?
If I properly understood the problem, your click event is not fired because the target is loaded after the event is attached. To fix it, you can un the `[on]'(http://api.jquery.com/on/) method.
$("#myModal").on( "click", "a#myLink", function() {
console.log( "click fired");
});
$("#modalContainer").on( "click", "#myTargetElement", function()
{
console.log("click fired");
});
$('#btn').click(function()
{
$('#modalContainer').html("<div id='myTargetElement'>ajax loaded content</div>")
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="modalContainer">initial content</div>
<button id=btn>fake ajax load</button>
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 6 years ago.
I have a sample
my JS code sample:
$('.owl-next, .owl-prev').on("click", function() {
alert("1");
});
There is a click event on two buttons, the problem is that these two div's configure consecutively, and the event I need doesn't work.
I need a suggestion how to make the click event on the two buttons work, even if the buttons appear later.
My javascript code uploads too quickly.
Use document.ready(). It won't set the code unless the site content and it's components are fully loaded.
Note: this solution doesn't work for asynchronous calls, used for dynamical adding elements into DOM. If you want to add your elements dynamically, check following link:
Event binding on dynamically created elements?
$(document).ready(function() {
$('.owl-next, .owl-prev').on("click", function() {
alert("1");
});
});
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 7 years ago.
Why is the link not working if the link is created with javascript?
It only works if I make the link without the html() output
Not working
$(".link").on('click', function(){
alert('Hello');
});
$("#link").html('Link');
<div id="link"></div>
Working
$(".link").on('click', function(){
alert('Hello');
});
Link
Your code doesn't work because event is bound when the element does not exists in DOM
Wrap your code in ready or move the code to the bottom of body so your code will run when the DOM is completely parsed
Use event delegation to bind event on dynamically created elements.(This will make the first option above optional)
Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.
$(document).ready(function() {
$("#link").on('click', '.link', function() {
$("#link").append(' Link ');
});
$("#link").html('Link');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="link"></div>
Change the order of the calls. The element with class of .link does not exist in the DOM yet when you attach the handler. You must add the link via the html call on the div before you can attach a handler to it with the on method. See below for a complete, working example.
$("#link").html('Link');
$(".link").on('click', function(){
alert('Hello');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="link"></div>
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 8 years ago.
This thing is driving me nuts.
So I load some simple HTML via AJAX and once it's loaded on the DOM I do this.
$('#wrap a.link').click(function(e) {
e.preventDefault();
alert("asdasdad");
});
It simply does not prevent the link from navigating to the url in the href attribute.
My syntax seems right and I've made sure the element is in the DOM and that the function finds the a.link element.
$("#wrap a.link").each(function(key, value) {
console.log("found a link"); // this shows up in the console
});
I have also tried using off() and stopImmediatePropagation() just in case some other event may be interfering, but nothing. I've also tried binding the event inside the each() loop with the same result.
What could be causing this behaviour?
Bind the events to the body for dynamic elements:
$('body').on('click','#wrap a.link',function(e) {
e.preventDefault()
});
Use event delegation:
$(document).on('click', '#wrap a.link', function(e) {
e.preventDefault();
alert("asdasdad");
});
Caution:
Keep your IDs unique.