Question

I am trying to use Javascript / JQuery to dynamically create several HTML buttons, each of which does something different when it is clicked.

My first attempt looked like this:

function myFunc( target_div, num_buttons ) {
    var buttons="";
    for ( var i=0; i<num_buttons; i++ ) {
        buttons += '<input type="button" id="button_'+i+'" value="button_'+i+'"></input>';
    }
    target_div.html( buttons );
    var doButtonPress = function( i ) {
        alert( i ); // I actually do something more complicated here, but it's not important now
    }
    for ( var i=0; i<num_buttons; i++ ) {
        $('#button_'+i).click( function() { doButtonPress(i); } );
    }
}

Unfortunately this doesn’t work because (I think) when the click event happens, doButtonPress is always passed the current value of i in myFunc’s scope, not – as I intended – the value i had when the click event was defined. Thus the value passed to doButtonPress is always equal to num_buttons regardless of which button is pressed. So I then tried this instead:

$('#button_'+i).click( new Function( "doButtonPress("+i+");" ) );

Unfortunately this doesn’t work either – I get a message “ReferenceError: Can’t find variable: returnResult”. I assume that’s because the Function constructor’s arg value isn’t parsed until the click event happens, and at that time I’m already outside of myFunc’s scope so doButtonPress is undefined? Am I getting this right so far?

So … what do I do? 🙂

Answer 1

Your code didn’t work because of the scope of variable i which would be num_button always inside the handler. You can fix it by wrapping it inside a closure but how about simplifying it by adding a class and making use of the id of the button.

function myFunc( target_div, num_buttons ) {
    var buttons="";
    for ( var i=0; i<num_buttons; i++ ) {
        //                             added class ----------------v
        buttons += '<input type="button" id="button_'+i+'" class="mybuttons" value="button_'+i+'"></input>';
    }
    target_div.html( buttons );
    var doButtonPress = function( i ) {
        alert( i ); // I actually do something more complicated here, but it's not important now
    }

    //yes, mybuttons exist 
    $('.mybuttons').click(function () {
         doButtonPress(this.id.replace('button_', ''));
         //this.id.replace('button_', '') <- returns i value
    });
}