jQuery defining click function overrides all click functions

Question

Here is my code:

<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" />

Results in the console output:

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

Why is using a for loop overriding all click() functions? I would expect to see the last two lines of the output to be:

clicked #submitQuestionText
clicked #submitQuestionArea

The documentation for jQuery click() states that it is not completely identical to a real click event. — Dave, Feb 24 '12 at 20:11
This is a scope problem, try the answer to this question: http://stackoverflow.com/questions/2192348/closures-in-a-for-loop — Kevin B, Feb 24 '12 at 20:15

score 2 · Accepted Answer · answered Feb 24 '12 at 20:16

Because you use global varible in closure, see 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();

});

score 0 · Answer 2 · answered Feb 24 '12 at 20:15

0

You are creating a closure in a loop which according to MDN is a common mistake. Please read this on MDN, especially the section about closures in a loop.

answered Feb 24 '12 at 20:15

Satyajit

3,839
1
19
14

score 0 · Answer 3 · answered Feb 24 '12 at 20:36

komelgman's answer is correct.

In terms of the code, alternatively you could just replace the

for(qt in qtypes){

with the jQuery iterator like this:

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

Don't forget to close the parentheses for the function '.each' !

Additionally, now you can use 'qt_value' instead of 'qtypes[qt]' in the body of the function.

score 0 · Answer 4 · answered Feb 24 '12 at 20:48

For what you want you can move the click function out of the loop, like this:

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

I hope it helps.

Cheers!

jQuery defining click function overrides all click functions

4 Answers4