DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> 新手常遇到的一些jquery問題整理
新手常遇到的一些jquery問題整理
編輯:JQuery特效代碼     
ClassYuan的blog.http://www.classyuan.com/.下面列舉一些:
1.跟HTML元素加載事件的時候,會在加載的時候同時執行該事件。
錯誤代碼:
代碼如下: $("#btnLoad").bind("click",GetProduct());
正確代碼
代碼如下:$("#btnLoad").bind("click", function() { GetProduct() });
我在這段代碼,忽略了Bind這個方法.Api的解釋是bind(type,[data],fn)
我錯誤的講fn當做一個簡單的function..導致這段代碼會在加載的時候執行一次這個fn..
這是一個書寫格式的疏忽.希望知道原因的大神可以指點。
2變量作用域的問題.(貌似這個不是jquery的問題.而是js跟.net的區別..)
代碼如下:function text() {
2 for (var i = 0; i < 3; i++) {
3 $("<a>刪除</a>").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 }

這個函數.我想讓他alert出相應的id..結果..答案很同意..3個<a>標簽的函數..彈出來都是3..
看了一下..明白了
變量作用域的問題,傳個tes函數的參數是循環結束後i的值,所以全部是3。
這一點似乎和.net不一樣。
最後接解決方案- -..直接吧$(this)傳遞進去了
3.事件執行順序的問題
代碼如下:<a target="_blank" title="Iphone" >
2 <img id="proImg7_2" src="" alt="Iphone" style="width:70px; height:60px; border:none;" />
3 </a>

給這個圖片綁定了onclick事件,事件的內容是給<img>標簽的parent增加一個href屬性.
但是事件執行完畢之後,將會直接跳轉到a標簽的鏈接。經過分析.
應為click是在href之前執行的,也就是當點擊圖片的時候A標簽已經有了href,然後同時又觸發了A標簽.
解決方案..去掉<img>外層的a標簽..然後修改事件
代碼如下:idwrap('<a href="http://www.baidu.com"></a>');
以上是我這個新手第一次使用jquery所遇到的問題..留在這裡.當做成長的歷程..各位大神老鳥..別噴吖..

第一個問題
$('#btnLoad').bind('click', GetProduct);
記住,綁定事件是綁一個函數上去,而GetProduct(),帶了括號以後,得到的是這個函數的返回值。而你的GetProduct的返回值明顯不是個函數
$("#btnLoad").bind("click",GetProduct());
改為:
$("#btnLoad").bind("click",GetProduct);
試試。
GetProduct() 是執行一個函數,然後返回值,但是返回的值並非 fn 類型。

第二個問題
其實.NET裡也有,這是閉包的問題,在閉包中得到的是i變量的地址,而i不斷在變,因此訪問這個地址後的獲得的值也一直在變,所以所有的tes都用了i這個變量最後的值,就是3
這個問題用如下方法解決(我簡化下代碼):
for (var i = 0; i < 3; i++) {
(function(i) {
$('<a>刪除</a>').appendTo('.div_list').bind('click', function() { tes(i); });
})(i);
}
如果你無法理解這麼寫的原理,沒關系,先記住這個形式,以後遇上類似的問題就按這個思路去寫,也就是外面套一層(function() { xxx })();
說到原畫,其實很簡單,通過函數的時候,i作為基本類型變量是按值傳遞的,也就是說會把當前的i的值復制一份值到這個函數中,因此每一次調用這個匿名函數的時候,i都是相互獨立的,不會受外層for的影響

第三個問題
當a沒有給href屬性時,href則默認為當前頁的址,所以你點擊後就會跳轉。所以網上流行的處理方式有以一下幾種
1.<a href="###">dfa</a>
2.<a href="javascript:void();">dfa</a>
3.<a href="javascript:;">dfa</a>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved