A compilation of some jquery problems that novices often encounter_jquery

ClassYuan's blog. http://www.classyuan.com/. Here are some examples:
1. When loading an event with an HTML element, the event will be executed at the same time as it is loading.
Error code:

Copy code The code is as follows:

$("#btnLoad").bind ("click",GetProduct());

Correct code

Copy code The code is as follows:

$("#btnLoad").bind("click", function() { GetProduct() });

I ignored the Bind method in this code. The explanation of Api is bind (type,[data],fn)
I mistakenly regarded fn as a simple function. As a result, this code will execute the fn once when loading..
This is an oversight in writing format. I hope someone who knows the reason can give me some advice.
2 The problem of variable scope. (It seems that this is not a problem with jquery. It is the difference between js and .net..)

Copy code The code is as follows:

function text() {
2 for (var i = 0; i < 3; i ) {
3 $("Delete ").attr({ id: "hr_" i, href: "javascript:;" }).addClass("btnCss").bind("click", function() { tes(i) } ).appendTo(".div_list");
4 }
5 }
6 function tes(id) {
7 alert(id);
8 }

This function. I want it to alert the corresponding id. The result is that the answer is very agreeable. It is a function with 3 tags. When it pops up, it is all 3..
Take a look. .Understand the problem of
variable scope. The parameter passed to the tes function is the value of i after the loop ends, so all are 3.
This seems to be different from .net.
Finally, the solution - -.. Just pass $(this) in
3. The problem of event execution order

Copy code The code is as follows:

2
3

Bind the onclick event to this image, and the content of the event It is to add an href attribute to the parent of the tag.
But after the event is executed, it will jump directly to the link of the a tag. After analysis.
It should be that the click is executed before the href, that is, when the image is clicked, the A tag already has the href, and then the A tag is triggered at the same time.
Solution.. Remove The outer a tag.. Then modify the event

Copy the code The code is as follows:

idwrap('< a href="http://www.baidu.com">');

The above are the problems that I, a novice, encountered when using jquery for the first time. I will leave them here and regard them as a process of growth. Dear masters and veterans, please don’t criticize me.

The first one Question
$('#btnLoad').bind('click', GetProduct);
Remember, the binding event is tied to a function, and GetProduct(), after adding parentheses, gets this The return value of the function. And the return value of your GetProduct is obviously not a function
$("#btnLoad").bind("click",GetProduct());
is changed to:
$("#btnLoad"). bind("click",GetProduct);
Try it.
GetProduct() executes a function and then returns a value, but the returned value is not of type fn.

The second problem
In fact, it also exists in .NET. This is a closure problem. What is obtained in the closure is the address of the i variable, and i is constantly changing, so after accessing this address The obtained value is also changing all the time, so all tes use the last value of the i variable, which is 3
This problem is solved as follows (I simplify the code):
for (var i = 0; i < 3; i ) {
(function(i) {
$('Delete').appendTo('.div_list').bind('click', function() { tes(i); });
})(i);
}
If you can’t understand the principle of writing this way, it doesn’t matter. Remember this form first, and you will encounter similar problems in the future. The problem is written according to this idea, that is, a layer of (function() { xxx })();
Speaking of the original painting, it is actually very simple. When passing the function, i, as a basic type variable, is passed by value. , which means that the current value of i will be copied to this function, so every time this anonymous function is called, i is independent of each other and will not be affected by the outer for

The third question
When a does not give the href attribute, href defaults to the address of the current page, so you will jump after clicking. Therefore, there are several popular processing methods on the Internet:
1.dfa
2.dfa
3.dfa