This question already has answers here:
jQuery document.ready vs self calling anonymous function
(5 answers)
Closed 8 years ago.
I have tested something and it was really strange...
When I use:
jQuery(document).ready(function ($){
console.log($('.box').length);
});
the return value is 4;
If I use this:
(function ($){
console.log($('.box').length);
})(jQuery);
the return value is 0;
(in the same document)
Any explanation for that?
(I have tried to reproduce in jsfiddle but both return same value.)
Your second example will cause the code in the function to run when the whole overall statement is parsed. The jQuery version waits until the DOM has been fully parsed and populated. The two pieces of code are simply different, in other words.
Related
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:
Javascript infamous Loop issue? [duplicate]
(5 answers)
Closed 8 years ago.
I have a click event attached to an element via JQuery in a loop (loop variable i):
$('#id_'+i).click(function() {ItemClick(i)});
And defined somewhere else:
function ItemClick(x) {
alert(x);
}
As expected, this doesn't work as expected, because of the closure. I'd like to see a different number shown for each different click event, instead I just get the last value of i.
I know I need to turn the i in the closure to something that somehow isn't attached to the scope of the closure, but it eludes me, even after trying various examples. Such as:
$('#id_'+i).click(function() {ItemClick(function(x){return x)(i))});
Is there a neat and concise way of doing this?
EDIT
After looking at the duplicate, I now have two answers (please close the question):
Answer A
$('#id_'+i).data('index',i);
$('#id_'+i).click(
function() {
ItemClick($(this).data('index'));
}
);
Answer B
$('#id_'+i).click(
function(index) {
return function () {
ItemClick(index)
};
}(i)
);
This is a very common javascript issue that occurs because Javascript is closure/scope based, not block based.
You can fix this by creating a closure around your function call.
$('#id_' + i).on('click', function() {
(function (index) {
ItemClick(index);
}(i));
});
jsFiddle Demo
This question already has answers here:
jquery/javascript: function(e){.... what is e? why is it needed? what does it actually do/accomplish?
(4 answers)
What is the purpose of this? (function ($) { //function code here })(jQuery);
(4 answers)
Closed 8 years ago.
In the following code, there are two 'e's, are they about the same object/type or actually about different things?
(function(e) {
var t = {
init: function() {
e(".pic").length && this.show()
}
};
window.Booth = t;
})(jQuery);
Also, I am a little confused with the overall semantics of the code snippet above, any documentation out there can explain it?
In this case, it's an alias for jQuery. Usually people use $, but in this case they didn't.
what you have is an anonymous, self-executing function.
the function is passed the jquery object (which is a function). e(".pic") is the same as $(".pic") or jQuery(".pic") because e is just a reference to jQuery.
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.