This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 3 years ago.
I've got a button on my page that allows a user to add a form. When a button within the new form is clicked, a jquery function should run. Unfortunately, the jquery function doesn't seem to run on the newly appended divs (it does run divs that existed on initial page load).
<div id="empty_form" style="display:none">
<!-- Form Contents -->
<div class="deletebox">
Remove
</div>
</div>
<div id='add_more'>
Add Another Form
</div>
<script>
$('#add_more').click(function() {
var form_idx = $('#id_form-TOTAL_FORMS').val();
$('#form_set').append($('#empty_form').html().replace(/__prefix__/g, form_idx));
});
</script>
<script>
$(".deletebox").click(function () {
console.log('box was clicked')
});
</script>
When the user clicks the deletebox within the newly appended form, nothing happens. I.e. jquery doesn't register that it was clicked and no message is printed to the console. Do you know how this issue can be addressed?
Thanks!
I needed to use
$(document).on('click', '.deletebox', function() {
rather than
$(".deletebox").click(function () {
New button added after DOM loaded, so it is not registered in DOM and not getting click.
Use below code for dynamic element click.
$(document).on('click','.deletebox',function () {
console.log('box was clicked')
});
Related
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 3 years ago.
I have a PHP snippet in a separate file which I am loading in a javascript file using jquery:
let signUpMode = $(".modal");
signUpMode.load("login_signup_popup.php");
This works because I am able to show this on screen. However, this snippet contains a button which I would like to click in the same javascript file where I loaded the snippet. something simple like:
$(".signupbtn").on("click", function(){
console.log("signed Up");
});
This click is, however, not working. signupbtn is a div element in the snippet. Somehow I am missing an extra step since jquery seems to not be recognizing the elements in the snippet.
Lazy loaded elements are not recognized from eventhandlers which are already initialized. So you have to set the event on a parent. This should work:
$(document).on('click', '.signupbtn', function(){
console.log("signed Up");
});
https://api.jquery.com/load/
You could use the complete function to check if it has loaded, or you could just put the button function inside there.
let signUpMode = $(".modal");
signUpMode.load("login_signup_popup.php", function() {
$(".signupbtn").on("click", function() {
console.log("signed Up");
});
});
This question already has answers here:
Click event doesn't work on dynamically generated elements [duplicate]
(20 answers)
Closed 6 years ago.
I am creating a button on the fly and appending it to a div.
I want to capture the click event on that button.
function(){
$('#menuDiv').append('<div class ="buttonWrapper"><input type="button" id="addToOrder" name="addToOrder" value="Add to order"></div>');
}
and then trying to capture the click event with this
$("#addToOrder").click(function () {
//Grab the selections made on the form
window.alert('i m in add to order');
updateOrderWindow();
});
This function is not executing. Don't know why. I have also tried it with the .buttonWrapper div class but it didn't work.
You may want to use the on handler to bind dynamically created elements:
$('#menuDiv').on('click', '#addToOrder', function () {
//Grab the selections made on the form
window.alert('i m in add to order');
updateOrderWindow();
});
This will bind the event itself to the menuDiv element, and will run the click handler for any children #addToOrder
Problem that your button created dynamically
You can try to use next code
$(document).on("click", "#addToOrder", function(){
alert ('button clicked');
});
Try with this
$(function(){
$('#menuDiv').append('<div class ="buttonWrapper"><input type="button" id="addToOrder" name="addToOrder" value="Add to order"></div>');
});
$('#menuDiv').on('click','#addToOrder', function (){
//Grab the selections made on the form
window.alert('i m in add to order');
//updateOrderWindow();
});
<div id="menuDiv"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
This question already has answers here:
How do I prevent a parent's onclick event from firing when a child anchor is clicked?
(25 answers)
Closed 6 years ago.
I have a situation in which I am creating dynamic content from my database. In which I am creating <div> with content in it. And I have added onclick event that <div>. If user click on the content of the div which means on <div> it opens a popup window. But if there is a anchor tag in the content. At that time if user clicks on anchor tag, Both the event executes it also opens the link page and popup.
I want to prevent that div onclick when anchor tag is clicked.
Is there any this that can help me?
if you use jQuery, try stopPropagation() function like this :
simple example :
$("div a").click(function(e) {
e.stopPropagation();
// your code here...
});
Or enhanced example with classes and IDs :
html :
<div id="content">
...
my link
...
</div>
js:
$("div#content a.noPropagation").click(function(e) {
e.stopPropagation();
// your code here...
});
here is documentation : https://api.jquery.com/event.stoppropagation/
Since you're adding the <div> dynamically, you can bind a click event handler to the closest ancestor to the dynamic content. Here's one way to do it:
$('.some-container').on('click', 'div.dynamic-content a', function(event) {
event.stopPropagation();
});
Here is an example https://jsfiddle.net/7c51j7av/
<div class="outer">
<div class="inner">
click me
</div>
</div>
$(".outer").click(function(){
alert("Here");
});
$(".inner").click(function(e){
e.stopPropagation();
alert("Stopped it");
});
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 8 years ago.
I have the following javascript code:
$(function (){
$('a.folder').click(function() {
// code goes here ...
}
});
And the following html code:
<a class="folder" href="GetFilesAndFolders?rootFolder=Exigences">Etudes de cas</a>
Whenever I click on the link, the javascript code is never reached. I must say that this html code is generated dynamically after the page loaded. Is this the reason? Any workaround?
when you attach the click handler it's possible that your anchor doesn't exist, try using this:
$(function (){
$(document.body).on('click', 'a.folder', function() {
// code goes here ...
});
});
using this event delegation the click event will fire even if your anchor created dynamically after this code.
$(document).ready(function() {
$("body").on("click", "a.folder", function(e) {
e.preventDefault();
alert('a .folder was clicked');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="folder" href="GetFilesAndFolders?rootFolder=Exigences">Etudes de cas</a>
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 8 years ago.
I know that on click is used for dynamically generated elements ... so my AJAX returns data and the link to be clicked on ... but for some reason , nothing happens .. below is my code
// jquery for the click event
$(".back_to_followers").on('click', function(event){
event.preventDefault();
alert('clicked');
$('.user_media_result').empty();
$('.user_media_result').hide();
$('.list_of_followers').show();
});
and the link brought by AJAX
<a class="back_to_followers" style="color:blue; font-size:20px;" href="#"> Back to list of followers </a>
Use this:
$(document).on('click', ".back_to_followers", function(event){
event.preventDefault();
alert('clicked');
$('.user_media_result').empty();
$('.user_media_result').hide();
$('.list_of_followers').show();
});
Your code only works on what is already loaded so you can set an event which targets the entire document or the parent element which contains the .back_to_followers and then defines the element which must be clicked: elements with .back_to_followers class.