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>
Related
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')
});
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 6 years ago.
Another toggleClass() problem. There are dozens question about this jQuery function but I could not find this specific one.
I have 2 buttons. One toggles the class of the other on click. This works fine since the colour changes, however when I use a click() event on the 'new' class nothing happens.
html
<button type='button' id='button1'>button 1</button>
<button type='button' id='button2'>button 2</button>
css
.pushed {
background-color: salmon;
}
js
$('#button1').click(function () {
$('#button2').toggleClass('pushed');
});
$('.pushed').click(function () {
alert('pushed!')
});
you can try it here: https://jsfiddle.net/tk9pt3o2/
Because you select the element with .pushed before even exists. Try to use this:
$(document).on('click', '.pushed',function () {
alert('pushed!')
});
on will bind the click event to the current matched elements and future matched elements.
Consider that you can just register event for an existing Dom elements.
the key point is $('.pushed') return jquery object with no element to register the event on 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:
jquery - Click event not working for dynamically created button [duplicate]
(4 answers)
Jquery/Javascript: Buttons added dynamically with javascript do not work
(3 answers)
Closed 8 years ago.
I can't get an alert to trigger when a dynamically generated button is clicked?
The alert is not going to be the final function but was a test to make sure the trigger is working correctly.
I tried a "onclick" function as a trigger and used the id as a jQuery trigger so not sure why it would not work; I will add a snippet below that shows what I mean.
From the file that generates and displays the button (it displays OK):
var modOptsMsg = document.getElementById("modOptionsMessage").value + '<input type="button" id="removePost" onclick="removePost()" value="Remove Post"/>';
$("#modOptsShowMsg").empty().append(modOptsMsg);
Neither of these simple tests work in JS or jQuery:
function removePost(){
alert("alert");
}
$('#removePost').click(function(){
alert("alert");
});
As #Regent has pointed out in the comments, use:
$(document).on("click", '#removePost', function() {
alert("alert");
});
$('#modOptsShowMsg').on("click", '#removePost', function() {
alert("alert");
});
the above code will work..if jquery is lesser than 1.7 use .live() instead of .on()
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.