This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 9 years ago.
I'm generating images from a folder with this script:
$(document).ready(function() {
$.ajax({
url: "gallery_images",
success: function(data){
$(data).find("a:contains(.jpg),a:contains(.gif),a:contains(.png)").each(function(){
// will loop through
var images = $(this).attr("href");
$('<div class="g_image"></div>').html('<img class="g_img" src="gallery_images/'+images+'"/>').appendTo('#galerija');
});
}
});
});
The problem is that, then I'm trying to click the image, simple jQuery click event does not work.
$(".g_image img").click(function(){
alert("WORKING!");
});
Use event delegation for this, you can take closest parent document instead document.body
$(document.body).on("click","#g_image img",function(){
alert("WORKING!");
});
try using delegate.
$("body").on("click","#g_image img",function(){
alert("WORKING!");
});
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:
Add click event on div tag using JavaScript
(6 answers)
Closed 7 years ago.
This is basic but I have no idea how to do this.
There is an addEventListener that fires on page load.
var imgcnvs = document.createElement('canvas');
var imagecxt = imgcnvs.getContext('2d');
window.addEventListener('load', function(){
//do something
}, false);
How can I convert window.addEventListener('load', function(){ to work when $('#startBtn') is clicked? `
$( "#startBtn" ).click(function() {
//dosomething
});
Please read the jquery documentation.
You need to get your target element, using document.getElementById for instance, and then attach the event listener to it. As follows:
document.getElementById("startBtn").addEventListener("click", function(event) {
// Do something
}, false);
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 8 years ago.
It is easy to add text in page after loading thanks to javascript but I would like to add a link with a link and be able to catch the click event without reloading page
$("#div").html("<a href='#' id='new'>new link</a>");
// not work, because no
$("#new").click(function(e) {
e.preventDefault();
alert('click');
});
Do you know if there is a way ?
replace
$("#new").click(function(e) {
e.preventDefault();
alert('click');
});
with
$(document).on('click','#new',function(e) {
e.preventDefault();
alert('click');
});
This question already has answers here:
How do I attach events to dynamic HTML elements with jQuery? [duplicate]
(8 answers)
adding jQuery click events to dynamically added content
(4 answers)
Closed 8 years ago.
I have a page with an empty div and when the user clicks on a button, a jQuery function is executed and loads some content. The problem I have is that I can't access the elements inside the div.
For example, if a link is loaded, if I have a function that executes when a link is clicked, it has no effect since the link is loaded content.
EDIT: an example code of how I load content.
$('#all').click(function(e){
e.preventDefault();
all = true;
$.ajax({
type: 'POST',
url: './?ajax=cars',
data : {all : true},
success: function(data){
$('#ajaxTable').html(data);
}
});
});
Replace:
$('#all').click(function(e){ /* code here */ });
With:
$(document).on('click', '#all', function(e){ /* code here */ });
The #all element is created after the click event is assigned so it won't apply to a new #all element. Using $(document).on() any #all contained inside the document regardless of load time will observe the event.
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');
});
});