Develop Reference

jquery onclick not working on element from .load() function [duplicate]

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");
});
});

jQuery selection of a button created on the fly [duplicate]

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>

cllick event of dynamically created Checkbox in Jquery [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 7 years ago.
I have a checkboxlist from which I want to get check event.
the checkboxes are created dynamically.
I am not able to fire the event
what I tried so far is
$(".XAxisrowCheckbox").click(function () {
//Do stuff
});
I also tried with this
$("input.XAxisrowCheckbox").click(function () {
//Do stuff
});
but no luck for me. Tag goes like this:
<input type="checkbox" class="XAxisrowCheckbox">
Please suggest something.

jQuery.on accepts selector as an argument (http://api.jquery.com/on/)
Example:
$(document).on('click', '.XAxisrowCheckbox', function () {
//do stuff
});

Coloring tr with jQuery [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 8 years ago.
I am trying to color tr with .click event using jquery.
My code has no problem with coloring the first row which is static, but other rows, created with jQuery don't want to color.
I have no idea why is not working on other rows.
$(function () {
$('tr').click(function () {
$(this).toggleClass("obarva");
});
});
Here is my existing code: `http://jsfiddle.net/1mihcc/7okvbkg2/1/

That's because the elements are not in the DOM when you run the jQuery selector. Use event delegation.
$(function () {
$(document).on('click', 'tr', function () {
$(this).toggleClass("obarva");
});
});

How to get click event on cell in a table after dynamically generated? [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 8 years ago.
First the error which i am recievieng is undefined is not a function.
I am generating a table on ajax call by button click. The problem is that the click event on cell is not performing.
my code is like
$(document).ready(function () {
$('#btnCall').click(function () {
$.ajax({....
success: function (data) {
//Here i am creating a table with id = myTable
}
});
});
//After ajax call completed i am using this
//but this is not happening
//i want to show alert when cell clicked of the table
$("#myTable tr td").click(function(event) {
alert(event.pageX);
alert(event.pageY);
});
});

You need to use jquery on event .
$("#myTable tr td").on('click', function(event) {
alert(event.pageX);
alert(event.pageY);
});