javascript - 使用 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); } );
    }
}

不幸的是，这不起作用，因为(我认为)当点击事件发生时，doButtonPress 总是传递 myFunc 范围内 i 的当前值，而不是 - 正如我预期的那样 - 我在定义点击事件时的值。因此，无论按下哪个按钮，传递给 doButtonPress 的值始终等于 num_buttons。所以我随后尝试了这个:

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

不幸的是，这也不起作用 - 我收到一条消息“ReferenceError:找不到变量:returnResult”。我认为这是因为 Function 构造函数的 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
    });
}