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
– Dave, Commented Feb 24, 2012 at 20:11
This is a scope problem, try the answer to this question: stackoverflow.com/questions/2192348/closures-in-a-for-loop — user400654
– user400654, Commented Feb 24, 2012 at 20:15

komelgman · Accepted Answer · 2012-02-24 20:16:53Z

2

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();

});

answered Feb 24, 2012 at 20:16

komelgman

7,0292 gold badges20 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Satyajit · Accepted Answer · 2012-02-24 20:15:46Z

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, 2012 at 20:15

Satyajit

3,8591 gold badge22 silver badges14 bronze badges

Comments

PeterK · Accepted Answer · 2012-02-24 20:36:43Z

0

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.

answered Feb 24, 2012 at 20:36

PeterK

616 bronze badges

Comments

pedro.couto · Accepted Answer · 2012-02-24 20:48:59Z

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!

Collectives™ on Stack Overflow

jQuery defining click function overrides all click functions

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related