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()
Related
I am learning JavaScript and jQuery, so I apologize in advance if this is a stupid question.
(function ($) {
$.fn.addDiv = function () {
this.append('<div></div>');
return this;
};
}(jQuery));
$('div').click(function () {
$('body').addDiv();
});
In the code above, I have written a simple jQuery plugin which appends a <div> element to the current value of this.
Now, after I click on an element and add some <div> elements, I realize that the click handler in not associated with the newly appended elements. This seems perfectly acceptable since naturally when the handler function was bound, it was to only the ones that existed and hence were present in the $('div') object.
Now, I know that binding the handler to all <div> elements within the plugin is as simple as follows.
(function ($) {
$.fn.addDiv = function () {
this.append('<div></div>');
$('div').click(function () {
$('body').addDiv();
}); // added this statement
return this;
};
}(jQuery));
But I'm sure that there is a better way to handle such event binding. This clearly duplicates code. So what is the best practice with regards to such event binding to elements that the plugin itself adds?
This is meant to be an educational example, please do not consider it to be any kind of use case and give me alternative solutions.
http://jsbin.com/jokururiyaca/1/edit
Edit: I know that some people recommend the use of .selector but it is deprecated in jQuery 2. Also, using it doesn't change the fact that the event handling code is still duplicated within the plugin.
This is one way you could solve your problem of re-binding the click handler to all elements.
You can create the DOM element using $('<div></div>'), add the click handler to only that element, using $('<div></div>').click(...), and then append it to the body with $('<div></div>').click(...).appendTo("body").
Example:
(function ($) {
$.fn.addDiv = function () {
$('<div></div>').click(function () {
$('body').addDiv();
}).appendTo("body");
return this;
};
}(jQuery));
Usually Event Delegation would be used to handle events on future elements.
Example:
(function ($) {
$.fn.addDiv = function () {
this.append('<div></div>');
return this;
};
}(jQuery));
$(document).on("click", "div", function(){
$('body').addDiv();
});
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');
});
Is there an event handler to use in JQuery when a DOM select element has finished loading?
This is what I want to achieve. It is working with other events except 'load'.
This piece of code is loaded in the head.
$(document).on('load', 'select', function(){
var currentSelectVal = $(this).val();
alert(currentSelectVal);
} );
The question was badly formed earlier. I need to attach the event handler to all select elements, both present when the document is loaded and dynamically created later.
They are loaded from a JQuery Post to a php-page. Similar to this:
$.post("./user_functions.php",
{reason: "get_users", userID: uID})
.done(function(data) { $("#userSelector").html(data);
});
I think we're all confused. But a quick break down of your options.
After an update made to the Question, it looks like the answer you might seek is my last example. Please consider all other information as well though, as it might help you determine a better process for your "End Goal".
First, You have the DOM Load event as pointed out in another answer. This will trigger when the page is finished loading and should always be your first call in HEAD JavaScript. to learn more, please see this API Documentation.
Example
$(document).ready(function () {
alert($('select').val());
})
/* |OR| */
$(function() {
alert($('select').val());
})
Then you have Events you can attach to the Select Element, such as "change", "keyup", "keydown", etc... The usual event bindings are on "change" and "keyup" as these 2 are the most common end events taking action in which the user expects "change". To learn more please read about jQuery's .delegate() (out-dated ver 1.6 and below only), .on(), .change(), and .keyup().
Example
$(document).on('change keyup', 'select', function(e) {
var currentSelectVal = $(this).val();
alert(currentSelectVal);
})
Now delegating the change event to the document is not "necessary", however, it can really save headache down the road. Delegating allow future Elements (stuff not loaded on DOM Load event), that meet the Selector qualifications (exp. 'select', '#elementID', or '.element-class') to automatically have these event methods assigned to them.
However, if you know this is not going to be an issue, then you can use event names as jQuery Element Object Methods with a little shorter code.
Example
$('select').change(function(e) {
var currentSelectVal = $(this).val();
alert(currentSelectVal);
})
On a final note, there is also the "success" and "complete" events that take place during some Ajax call. All jQuery Ajax methods have these 2 events in one way or another. These events allow you to perform action after the Ajax call is complete.
For example, if you wanted to get the value of a select box AFTER and Ajax call was made.
Example
$.ajax({
url: 'http://www.mysite.com/ajax.php',
succuess: function(data) {
alert($("select#MyID").val());
}
})
/* |OR| */
$.post("example.php", function() { alert("success"); })
.done(function() { alert($("select#MyID").val()); })
/* |OR| */
$("#element").load("example.php", function(response, status, xhr) {
alert($("select#MyID").val());
});
More reading:
.ajax()
.get()
.load()
.post()
Something else to keep in mind, all jQuery Ajax methods (like .get, .post) are just shorthand versions of $.ajax({ /* options|callbacks */ })!
Why dont you just use:
$(document).ready(function () {
//Loaded...
});
Or am I missing something?
For your dynamic selects you can put the alert in the callback.
In your .post() callback function, try this:
.done(function(data) {
data = $(data);
alert(data.find("select").val());
});
Ok, correct me if I understand this wrong. So you want to do something with the selects when the document is loaded and also after you get some fresh data via an ajax call. Here is how you could accomplish this.
First do it when the document loads, so,
<script>
//This is the function that does what you want to do with the select lists
function alterSelects(){
//Your code here
}
$(function(){
$("select").each(function(){
alterSelects();
});
});
</script>
Now everytime you have an ajax request the ajaxSend and ajaxComplete functions are called. So, add this after the above:
$(document).ajaxSend(function () {
}).ajaxComplete(function () {
alterSelects();
});
The above code will fire as soon as the request is complete. But I think you probably want to do it after you do something with the results you get back from the ajax call. You'll have to do it in your $.post like this:
$.post("yourLink", "parameters to send", function(result){
// Do your stuff here
alterSelects();
});
Do you want all Selects to be checked when the User-Select is loaded, or just the User-Select?...
$.post("./user_functions.php", {reason: "get_users", userID: uID}).done(function(data) {
$("#userSelector").html(data);
//Then this:
var currentSelectVal = $("#userSelector").val();
alert(currentSelectVal);
});
If your select elements are dynamically loaded, why not add the event handler after you process the response?
e.g. for ajax
$.ajax({
...
success: function(response) {
//do stuff
//add the select elements from response to the DOM
//addMyEventHandlerForNewSelect();
//or
//select the new select elements from response
//add event handling on selected new elements
},
...
});
My solution is a little similar to the posters above but to use the observer (pubsub) pattern. You can google for various pub sub libraries out there or you could use jQuery's custom events. The idea is to subscribe to a topic / custom event and run the function that attach the event. Of course, it will be best to filter out those elements that have been initialize before. I havent test the following codes but hopefully you get the idea.
function attachEventsToSelect(html) {
if (!html) { // html is undefined, we loop through the entire DOM we have currently
$('select').doSomething();
} else {
$(html).find('select').doSomething(); // Only apply to the newly added HTML DOM
}
}
$(window).on('HTML.Inserted', attachEventsToSelect);
// On your ajax call
$.ajax({
success: function(htmlResponse) {
$(window).trigger('HTML.Inserted', htmlResponse);
}
});
// On your DOM ready event
$(function() {
$(window).trigger('HTML.Inserted'); // For the current set of HTML
});
I have a function that is associated with an event, say onfocus() and in some cases, I want to be able to execute the default function as well as one or more additional functions.
So I don't want to replace the original function, but I want to append another so that both functions will fire.
<div id="mydiv" onfocus="alert('hello');">
if(something == somethingelse) $('#mydiv').onFocus += "alert('world');"
So in this example, sometimes just Hello will Fire and sometimes Hello and then World will both fire.
I'm just using onfocus() and alert() as an example, these would actually be functions that I have defined.
How do I go about doing this ?
Use jQuery to add a focus event handler
<script>
$('#mydiv').on('focus', function(){
//do soemthing
})
</script>
If you work with jQuery don't use inline event bindings, use the following instead:
$("#mydiv").on("focus", function() {
alert("hello");
});
// add one more action for the same event
$("#mydiv").on("focus", function() {
alert("world");
});
You should do
$('#myDiv').on('focus', function(){alert('world')});
$('#mydiv').focus( function(){
})//This is for the elements which load while the page is loading
or
$('#mydiv').on('focus', function(){
}) //This is for the elements which will load dynamically after the page load completed.
If you don't want to use jQuery try this, its an pure javascript equivalent:
document.getElementById("mydiv").addEventListener("focus", function() { alert('world'); });
and if you want it to be compatible with IE8 and older you should try
var el = document.getElementById("mydiv");
if(el.addEventListener)
el.addEventListener("focus", function() { alert('world'); });
else
el.attachEvent("focus", function() { alert('world'); });
if you're using jQuery, you want to use on() to bind event handlers to elements as opposed to specifying them inline
$('#mydiv').on('focus', function () {
alert('hello');
});
$('#mydiv').on('focus', function () {
if (something === somethingelse) {
alert('world');
}
});
or combining into one handler function seems reasonable in this case
$('#mydiv').on('focus', function () {
alert('hello');
if (something === somethingelse) {
alert('world');
}
});
When specifying them inline as you have done, only one event handler can be bound to the event so if you want to bind multiple event handlers, you either need to bend the one event handler limitation to handle this or use another approach, such as DOM Level 2 events or an abstraction on top of it (such as jQuery's on() function).
Event handlers need to be bound when the element to which you are binding the handlers exists in the DOM. To do this, you can use jQuery's ready() function
// bind an event handler to the "ready" event on the document
$(document).ready(function () {
// ..... here
});
or shorthand
$(function () {
// ..... here
});
Is there a way to check if jQuery fired the page load events yet, or do you have to roll your own? I need to alter the behavior of links, but I don't want to wait until the page finishes loading because the user could conceivably click on a link on, say, the top half of the page before the page finishes loading. Right now I'm doing it like this:
var pageLoaded = false;
$(function() {
pageLoaded = true;
});
function changeLinks() {
$("a[data-set-already!='true']").each(function() {
$(this).attr("data-set-already", "true").click(...);
});
// Is there something along the lines of jQuery.pageWasLoaded that I can
// use instead?
if (!pageLoaded) {
window.setTimeout(changeLinks, 100);
}
}
changeLinks(); // Added per #jondavidjohn's question
Since you are using the document ready shorthand, I'm guessing you mean when the dom is loaded. For this:
$.isReady
You could use setInterval and clear the interval on domready:
var changeLinksInterval = setInterval(function () {
$("a[data-set-already!='true']").each(function() {
$(this).attr("data-set-already", "true").click(...);
});
}, 100);
$(function () {
clearInterval(changeLinksInterval);
});
By the way, in your code example, you shouldn't need .each() - you should be able to call .attr() and .click() directly and let jQuery do the looping. Unless there is more to your .each() code that you didn't post.
$("a[data-set-already!='true']").attr("data-set-already", "true").click(...);
you could use .live() to initiate a click event that needs additional work when binding.
$("a[data-set-already!='true']").live(function(){
// since this event will only fire once per anchor tag, you
// can safely bind click events within it without worrying
// about getting duplicate bound click events.
var $this = $(this);
$this
.data("dataSetAlready",true)
.click(myClickHandler);
});
this is also a useful technique for late-initializing plugins on elements that may not exist at domReady.