使用Javascript / JQuery动态创建具有不同点击事件处理程序的多个HTML按钮

Question

我正在尝试使用Javascript / JQuery动态创建多个HTML按钮，每个按钮在单击时都会执行不同的操作。

我的第一次尝试看起来像这样：

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

不幸的是，这不起作用，因为（我认为）当click事件发生时，doButtonPress总是在myFunc的范围内传递i的当前值，而不是 - 正如我的意图 - 我定义了click事件时的值。 因此，无论按下哪个按钮，传递给doButtonPress的值总是等于num_buttons。 所以我接着尝试了这个：

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

不幸的是，这也不起作用 - 我收到一条消息“ReferenceError：找不到变量：returnResult”。 我假设这是因为在click事件发生之前，函数构造函数的arg值没有被解析，那时我已经在myFunc的作用域之外，所以doButtonPress是未定义的？ 到目前为止，我是否正确行事？

那么......我该怎么办？ :-)

Answer 1

你的代码不起作用，因为变量i的范围总是在处理程序中的num_button 。 您可以通过将其包装在closure包中来修复它，但如何通过添加类并使用按钮的id来简化它。

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

Answer 2

我的建议是为每个按钮分配一个data属性，然后在单击按钮时可以读取该属性。 这将避免需要不必要的（和丑陋的）增量id属性。 像这样的东西：

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

示例小提琴