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.
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:
Event binding on dynamically created elements?
(23 answers)
Closed 7 years ago.
I have dropdown on page with this menu item:
<li><a onclick="return false" href="javascript:void(0)" class="change-state" data-id="#Model.Id" data-state="#ReportStatus.New">Mark as New</a></li>
And I have jquery event handler for click on this <a>
$(function () {
$('.change-state').click(function () {
var attr = this.dataset;
$.ajax({
method: 'POST',
url: '#Url.Action("ChangeReportStatus", "Default")',
data: { id: attr.id, status: attr.state },
success: function (data) {
var name = '#report-number-' + attr.id;
$(name).html(data);
}
});
});
});
And when I open my page, click this <a> I have changes by ajax, but if I try to click it again, nothing works. I think it's because I using javascript:void(0), but without this my ajax refresh all page, not only element. Please help me to solve this issue.
From your code I am assuming that you are getting the name of a container and then replacing the html in it which includes you anchor tag? If so then a click event won't do it because the anchor tag will be dynamically created again and it won't be registered to use your click event. You need to try this as your event handler instead
$('.change-state').on('click', function() {
....
});
This question already has answers here:
jQuery Event : Detect changes to the html/text of a div
(13 answers)
Closed 7 years ago.
I want to call a function whenever the content in a particular DIV changes.
For example:
I have a div. This div displays some data on page load. On another button click, there is some more data displayed in the same div. When data in the div increases, I want to call another function.
Any ideas?
On another button click, there is some more data displayed in the same
div.
On click of that button, check for the content of the DIV. If the content has increased then call your function.
var divContent = $("div#target").text();
$("button").click(function() {
if(divContent !== $("div#target").text()) { // you can even check for length also
divContent = $("div#target").text();
// call your function here
}
});
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.
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!");
});