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");
});
});
Related
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:
jquery .click overriding anchor href when i dont want it to!
(4 answers)
Closed 8 years ago.
When setting up a div with a class, attaching a click event to that class using jQuery, it prevents any child href from working.
For example:
HTML
<div class="someClass">
some text here
and a link
</div>
JS
$('body').on('click', '.someClass', function(e) {
alert("clicked");
});
jsfiddle for this: http://jsfiddle.net/w6ero5j5/2/
it will always alert the message, even when clicking on the link.
how can I make the link works?
I dont know why do you want this. But, it happen when you put alert function.
Then If you execute this, there is not problem. code here
$('.someClass').on('click', function(){
var $this = $(this);
if ( $this.hasClass("ok") ) {
$this.removeClass("ok");
} else {
$this.addClass("ok");
}
});
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:
Why isn't my JavaScript working in JSFiddle?
(7 answers)
Closed 9 years ago.
I have some simple code for one of my first jquery scripts, I'm trying to call it's function but it keeps saying the function doesn't exist! I have check the spelling and I'm sure I had this working before but I have no idea what's changed.
This is my code: http://jsfiddle.net/spadez/6LLpC/
This is how I'm calling my function:
jQuery(function($){
applyField();
});
Can anyone show me where I went wrong please?
applyField isn't defined because jsFiddle wraps your code in an onload event handler. So the function is only visible in this event handler.
Choose "no wrap - in <head>" in the left menu :
Alternatively, you could also call your function from this event handler, this would be more coherent.
Note that calling the function isn't enough. If you want your event binding to be effective, change
$(this).on('change', '#apply',function() {
to
$(document.body).on('change', '#apply',function() {
Demonstration
After fixing the onload issue, your second problem is this is not a parent of the <select> element, in your function. In order to use that style of .on you need to pass in a parent of the element you're targeting (which can be document).
Change from:
$(this).on('change', '#apply',function() {
To:
$(document).on('change', '#apply',function() {
Also, to prevent hiding all inputs, I suggest using a class instead of selecting $('input'). See fiddle.
Updated fiddle
Approach - 1 => Click here for Demo
JQuery
$(document).ready(function(){
applyField();
});
// Apply Fields
function applyField() {
$(this).on('change', '#apply',function() {
var selected = $(this).find(':selected').val(),
elem = $("#"+selected);
$("input").addClass('hidden');
elem.removeClass('hidden');
$(".donthide").show();
});
$("#apply").trigger('change');
};
Approach - 2=> Click here for Demo
JQuery
on needed to execute the function after the DOM is ready.. Check demo.
$(document).ready(function () {
$(this).on('change', '#apply',function() {
var selected = $(this).find(':selected').val(),
elem = $("#"+selected);
$("input").addClass('hidden');
elem.removeClass('hidden');
$(".donthide").show();
});
$("#apply").trigger('change');
});
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Why does jQuery or a DOM method such as `getElementByID` not find the element?
I load the file using jquery.load(). In my load_to.html I am targeting the element with id as
$('#users').change(function() {
alert('hello');
});
this element is present in load_from.html. I couldn't able to target this. But when I inspect the page I can able to see this element.
I loaded the page like this
$('#mydiv').load('/user/1/edit form');
How to target the element?
Use on in it's delegate signature:
$('#mydiv').on('change', '#users', function() {
alert('hello');
});
Read the docs
Try to set up your events in the callback from .load to make sure they are created once the elements enter the DOM.
$('#mydiv').load('/user/1/edit form', function () {
//Callback
//set up events here (once it is finished loading)
$('#users').change(function() {
alert('hello');
});
});