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');
});
});
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 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:
Event binding on dynamically created elements?
(23 answers)
Closed 9 years ago.
I have the following code:
<script type="text/javascript">
$(function () {
$(".wrapper1").scroll(function () {
$(".wrapper2").scrollLeft($(".wrapper1").scrollLeft());
});
$(".wrapper2").scroll(function () {
$(".wrapper1").scrollLeft($(".wrapper2").scrollLeft());
});
});
</script>
But my HTML is dynamic and added later. Is there a way that I can use this code outside of the dynamically added HTML so that it works after the HTML is loaded ?
You can use event delegation. Use
$(document).on('scroll', '.wrapper1', function () {
instead of
$(".wrapper1").scroll(function () {
and similarly for all the dynamically loaded elements.
More info here
Take a look at the .on() property to delegate dynamically created elements.
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!");
});
This question already has answers here:
How to select an element loaded through the jQuery load() function?
(2 answers)
Closed 6 years ago.
$(document).ready(function() {
$("img.tile").click(function() {
var actid = $(this).data().id;
$("#lz").load("/dialog/pre?actid=" + actid);
$("#btnCheck").click(function() {
alert("test");
});
});
The load() call brings in an HTML fragment that has an <input id="btnCheck" value="Check" />
But the event doesn't fire when I click on it.
Must have something to do with how the fragment is loaded. How do you make this work?
Correct, you either need to attached the click event after you are sure the data has loaded or use the live event to attach it. live will attach a handler if it finds it now or at any point in the future and is probably easiest to implement:
$("#btnCheck").live('click', function() {
alert("test");
});
Alternatively, you can attach it after you are sure the data has loaded. As #bzlm pointed out in his comment load is an asynchronous event so you can't assume it has finished in any subsequent code. Fortunately load allows you to pass a function as a second argument that will fire after all of the data has loaded:
$("#lz").load("/dialog/pre?actid=" + actid, function() {
$("#btnCheck").click(function() {
alert("test");
});
});
The best way would be to use delegate and take advantage of event bubbling to capture events on elements that may not yet exist. This is very easy, especially as you can work on the existing selection to provide a context:
$(document).ready(function () {
$("img.tile").click(function () {
var actid = $(this).data().id;
$("#lz")
.load("/dialog/pre?actid=" + actid)
.delegate("#btnCheck", "click", function () {
alert("test");
});
});
});
This is functionally equivalent to the load examples, but will have slightly better performance in several ways.
Try:
$(document).ready(function() {
$("img.tile").click(function() {
var actid = $(this).data().id;
$("#lz").load("/dialog/pre?actid=" + actid);
$("#btnCheck").live('click', function() {
alert("test");
}); });
This will pick up any elements added to the dom after the load event. A better way might be to use .delegate()