jQuery的定義點擊功能將覆蓋所有的點擊功能

Question

這裏是我的代碼：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" ></script> 
<script type="text/javascript" > 

$(document).ready(function() { 

    var qtypes = ['Text','Area']; 

    for(qt in qtypes){ 

     console.log('#submitQuestion' + qtypes[qt] + ' ' + qt); 
     var name = '#submitQuestion' + qtypes[qt]; 
     $(name).click(function(){ 
      console.log('clicked ' + name); 
     }); 
     $('#submitQuestion' + qtypes[0]).click(); 
    } 

    $('#submitQuestion' + qtypes[0]).click(); 
    $('#submitQuestion' + qtypes[1]).click(); 

}); 


</script> 
<input type="button" id="submitQuestionText" value="submit Question" /> 
<input type="button" id="submitQuestionArea" value="submit Area" /> 

結果在控制檯輸出：

#submitQuestionText 0 
clicked #submitQuestionText 
#submitQuestionArea 1 
clicked #submitQuestionArea 
clicked #submitQuestionArea 
clicked #submitQuestionArea 

爲什麼使用for循環覆蓋所有點擊（）函數？我希望看到輸出的最後兩行是：

clicked #submitQuestionText 
clicked #submitQuestionArea 

Answer 1

由於您使用封閉全球varible，看到test here

$(document).ready(function() { 

    var qtypes = ['Text','Area']; 

    for(qt in qtypes){ 

     console.log('#submitQuestion' + qtypes[qt] + ' ' + qt); 
     var name = '#submitQuestion' + qtypes[qt]; 
     $(name).data('name', name); 
     $(name).click(function(){ 
      console.log('clicked ' + $(this).data('name') + '<br/>'); 
     });  
    } 

    $('#submitQuestion' + qtypes[0]).click(); 
    $('#submitQuestion' + qtypes[1]).click(); 

}); 

Answer 2

你正在創建一個循環，根據MDN這是一個常見的錯誤閉合。請在MDN上閱讀this，特別是關於循環閉包的部分。

Answer 3

komelgman的答案是正確的。

在代碼方面，或者你可以只用jQuery的迭代器這樣的替換

for(qt in qtypes){

：

$.each(qtypes, function(qt, qt_value) {

不要忘記關閉括號「的功能。每個'！

此外，現在您可以在函數的主體中使用'qt_value'而不是'qtypes [qt]'。

Answer 4

對於你願意，你可以移動點擊功能圈外的，像這樣的內容：

$(document).ready(function() { 
    var qtypes = ['Text','Area'] 
    var qsel = 'Text'; 

    //updated code (click function) 
    function clickThis(name){ 
     $(name).live('click', function(){ 
      console.log('clicked'+name);   
     });       
    }  
    //end updated code 

    for(qt in qtypes){ 
     console.log('#submitQuestion' + qtypes[qt] + ' ' + qt); 
     var name = '#submitQuestion' + qtypes[qt];   
     //updated code 
     clickThis(name); 
     //end updated code  
     $('#submitQuestion' + qtypes[0]).click(); 
    } 
    $('#submitQuestion' + qtypes[0]).click(); 
    $('#submitQuestion' + qtypes[1]).click(); 
}); 

的jsfiddle：http://jsfiddle.net/brAuL/

我希望它能幫助。

乾杯！