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()
Related
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Event binding on dynamically created elements?
(23 answers)
Closed 3 years ago.
I try to run the following code in Javascript :
function test(){
if(document.querySelector('.js-pricing')){
var checkbox = document.querySelector(".js-pricing");
alert('is working');
checkbox.addEventListener('change', function(){
if(this.checked) {
console.log('is-checked')
} else {
console.log('is not')
}
})
}
}
test();
to know when my checkbox is checked or not, the EventListener is not working I have none console.log in my console but my alert() is working well, I guess the element is well detected when the page is loaded but can't handle the event listener.
Also tried with document.ready to start the event but it does not work
I have the same result when I try with a getElementById.
Here is my html (in jade) line for the input :
input(type="checkbox", name="pricing", id="pricing", checked).switch__input.js-pricing
Do you know how to run the EventListener properly?
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:
Event binding on dynamically created elements?
(23 answers)
Closed 7 years ago.
i have this button inside a popup.(in a javascript file)
'<div class="thisdiv" >'+
'<button class="btn btn-primary" >this</button>'+
'</div>'+
and i am accessing this in function
$('.thisdiv').on('click', function (e) {
$('.overlay').hide();
$('body').removeClass('overflow');
});
this is basically supposed to be a button which, when clicked, closes the pop up. (the simple cross button)
but it does not work. it does not go into the function, i was told to use delegates. but shouldn't this be the simpler method? what am i missing?
Seems like you are creating the elements dynamically. Then you need to use event delegation,
$(document).on('click', '.thisdiv', function (e) {
$('.overlay').hide();
$('body').removeClass('overflow');
});
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:
Closed 10 years ago.
Possible Duplicate:
jQuery Chosen reset
I'm using Chosen plugin on my project.
http://jsfiddle.net/tt13/gFzzc/
The problem is, I can't reset chosen input textbox programmaticaly. How to do it when I click clear button?
This works jsfiddle
$('button').click(function(){
$('.search-choice-close').click();
});
You might narrow down the scope a bit in case of multiple controls.
First of all, you should use the correct version of Chosen, taken from here:
https://raw.github.com/harvesthq/chosen/master/chosen/chosen.jquery.js
Then, simply reset the value of the select and trigger "liszt:updated" event:
$("button").on("click", function() {
$(".chzn-select").val("").trigger("liszt:updated");
});
DEMO: http://jsfiddle.net/gFzzc/13/
You can try something like this :
Give Id to the button:
say clear_chosen
and then trigger close button:
javascript code::
$("#clear_chosen").click(function(){
$(".search-choice-close").click();
});
Write the code inside this block::
$(function () {
$('.chzn-select').chosen();
});
Ugly hack, but works:
Demo: jsfiddle
Code:
$('button').click(function() {
$(".chzn-select").next('.chzn-container').find('.search-choice').remove();
$(".chzn-select").val('');
$(".chzn-select").next('.chzn-container').find('.search-field input').focus();
});