Use Javascript / JQuery to dynamically create multiple HTML buttons with different click event handlers

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? :-)

Selvakumar Arumugam · Accepted Answer · 2012-11-02 16:26:50Z

3

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

answered Nov 2, 2012 at 16:26

Selvakumar Arumugam

79.9k15 gold badges123 silver badges139 bronze badges

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

1 Comment

baixiwei Over a year ago

Great - thanks! I like this solution because it allows doButtonPress to not know anything about the buttons, as intended. Although I guess I should change the name if that's what I intend! :)

Rory McCrossan · Accepted Answer · 2012-11-02 16:30:45Z

1

My suggestion would be to assign a data attribute to each button which can then be read when the button is clicked. This will then avoid the need for unnecessary (and ugly) incremental id attributes. Something like this:

function myFunc($target_div, num_buttons) {
    var buttons = [];
    for (var i = 0; i < num_buttons; i++) {
        buttons.push($('<input type="button" class="button" data-id="' + i + '" value="button ' + i + '" />'));
    }
    $target_div.append(buttons);

    var doButtonPress = function() {
        alert($(this).data('id'));
    }

    $(".button").click(doButtonPress);
}

Example fiddle

answered Nov 2, 2012 at 16:30

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

2 Comments

baixiwei Over a year ago

Ah, OK, so when doButtonPress is called, this will automatically refer to the button that was clicked to invoke it? Cool. Thanks!

Rory McCrossan Over a year ago

@baixiwei no problem. Don't forget to click the green tick to the left if this answer helped.

Collectives™ on Stack Overflow

Use Javascript / JQuery to dynamically create multiple HTML buttons with different click event handlers

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related