This question already has answers here:
jQuery best practices in case of $('document').ready
(9 answers)
Closed 4 years ago.
Does this:
$(document).ready(function(){
alert("Hello World");
});
And this:
(function($){
alert("Hello World");
})(jQuery);
do the same thing?
The former is what I commonly use and the second I have seen used in several plugins. Are they the same, if not then what are their differences and which one to use when?
They are not the same.
The former is a document.ready event handler. It will run as soon as the DOMContentLoaded event fires. It can also be written like this:
$(function() {
alert("Hello World");
});
The latter is an Immediately Invoked Function Expression (IIFE). This will be executed immediately (as the name implies). Therefore you need to manually ensure that the DOM is in a state ready to be interacted with before you execute this logic. You can generally do this by placing the script at the end of the body tag, or within it's own document.ready handler. The latter is a little redundant when working with jQuery, though.
Related
This question already has answers here:
Why does click event handler fire immediately upon page load?
(4 answers)
Closed 3 years ago.
I have two scripts:
<script src="../js/createopp.min.js"></script>
<script src="../js/validation.min.js"></script>
This following line is in the first script, calling a function in the other one:
$('#places').blur(function(){checkPlacesAvailable()});
If I rewrite this as
$('#places').blur(checkPlacesAvailable());
I get a "not defined" error on the function. But I see many examples where the second format is used. Is there something obvious stopping the second version from working in my case?
You should pass function references to event handlers like that.
$('#places').blur(function(){checkPlacesAvailable()});
"is" "equivalent" to this
$('#places').blur(checkPlacesAvailable);
Note that it is not exactly the same because of scopes and all that but most of the times you can pass it in the second manner
This code:
$('#places').blur(checkPlacesAvailable());
start your function immediatly. If you don't want to write "function" you can make this:
$('#places').blur(() => checkPlacesAvailable());
This question already has answers here:
jQuery $(function() {}) vs (function () {})($) [duplicate]
(3 answers)
Closed 3 years ago.
What is the difference between (function(){})(); and $(document).ready(function ())
First: (function(){})();
Second: $(document).ready(function ())
I have a question about it.
if I use it in the first option, there is an error when I click it. The Error is that it does not work and there is no error.
but if I use the second one, there is no error. It is not working.
what is the difference between to two ?
This will execute immediatly:
(function(){
console.log("Called immediately invoked function expression");
})();
Where as, the function passed to jQueries $.ready() function will execute when the document can be safely manipulated:
$(document).ready(function () {
console.log("The document is safe to be interacted with");
});
The reason the first method causes errors is likely because the HTML document is not ready for interaction at the time that your function is called (ie immednaitly).
The second approach will however ensure that (in most cases), any scripts, HTML, or other resources (which the JavaScript defined in that function might depend on) are loaded and present before that function is invoked.
This question already has answers here:
What is a callback function?
(22 answers)
Closed 7 years ago.
$("p").click(function(){
// action goes here!!
});
In the above jquery code why we pass a function() to the event?
It's called a callback or an anonymous function that you want executed when the event happens. You'll notice it's not just jQuery, but almost all Javascript frameworks will expect one. It's usually whenever you are binding to events, executing functions that might take a while to return, or functions that execute other functions.
But you can also provide it a function name if you want.
function clickedMe(){
alert("Something clicked me");
}
$("p").click(clickedMe)
Because the click method is defined this way (the method parameter ).
See:
click
You have to understand its not a default JavaScript method, this method is defined in the JQuery so you have to call it as it is defined in the method.
Behind the scene actually when JQuery registering any event with DOM its only says to do one thing which is calling your provide method.
The simplest answer: according to documentation.
https://api.jquery.com/click/
When a user clicks a p element, jQuery is supposed to fire an event and execute something. How is it supposed to pass actions, if not using functions?
This question already has answers here:
What does $(function() {} ); do?
(6 answers)
Closed 9 years ago.
I find the following code in an html document:
<script type="text/javascript">
$(function () {
...
});
I cannot see any intrinsic events like onload = and would like to know how this code is called?
What is the real name and scope of this function and can I call any function defined inside? How?
Whenever you see $ before a function, or $(...).function(...) that usually denotes jQuery.
In the following fiddle I use this code, which is executed on load:
$(function () {
alert("hi!");
});
See here: http://jsfiddle.net/VMZkW/
It is just an anonymous function . In javascript you don't really need to give it a name and because of that after executing once you can never refer it again.
You can have anonymous functions that can be used several times, but not this one. To reuse an anonymous function you just return it to something.
And being an annonymous function it does not create any scope or naming issues and it can access everything according to where it is defined. So you can call outer function too from inside.
This question already has answers here:
What does the exclamation mark do before the function?
(8 answers)
Closed 9 years ago.
I have been searching, but no clues... or I haven't search the proper way (so please excuse me if duplicate)
Does the following code, mean: If there is no jQuery defined, or no document ready?
!function ($) {
///
!function ($) {
$(function(){ // I know this is an alias to $(document).ready()
.....
}(window.jQuery) // Ending of !function
I'm asking, because I saw it here: http://twitter.github.io/bootstrap/assets/js/application.js and have no I really don't know what it means.
In this case, ! is being used because it's an operator, so the rest of the line will be treated as an expression rather than a statement. This is a way of writing an immediately invoked function expression. The more common idioms can be found here:
Javascript immediately invoked function patterns
! on a function(){}() simply flips (or negates) the value that's returned after immediately calling the function that's defined. Notice that immediately after the function definition, at the very last line, it says (window.jQuery) — that's passing jQuery as the argument to the function and calling it immediately.
But in this case it doesn't appear to do anything important since the return value won't be used anyway. The function will still be executed though.
Also, it says this at the top of the file:
// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
// IT'S ALL JUST JUNK FOR OUR DOCS!
// ++++++++++++++++++++++++++++++++++++++++++
So that's evidence further that it's not meant to serve any real purpose.