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 

Почему использует для цикла переопределяя все функции (щелчок)? Я ожидал увидеть последние две строки вывода, чтобы быть:

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 является распространенной ошибкой. Пожалуйста, прочитайте this на MDN, особенно раздел о замыканиях в петле.

Answer 3

komelgman является правильным.

С точки зрения кода, в качестве альтернативы можно просто заменить

for(qt in qtypes){

с JQuery итератора, как это:

$.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/

Я надеюсь, что это помогает.

Cheers!