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

我正在尝试使用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); } );
    }
}

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

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

---

所以。。。我该怎么办？：-）

由于变量

i

的作用域，您的代码无法工作，该变量将始终位于处理程序内部。您可以通过将其包装在

闭包中来修复它，但如何通过添加一个类并使用按钮的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
    });
}

函数myFunc（目标div，num按钮）{
var按钮=”；
对于（var i=0；i您的代码不起作用，因为变量
i
的作用域总是在处理程序中
num_button
。您可以通过将其包装在
闭包中来修复它，但如何通过添加一个类并使用按钮的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
    });
}

函数myFunc（目标div，num按钮）{
var按钮=”；
对于（var i=0；i我的建议是为每个按钮分配一个
数据
属性，单击按钮时可以读取该属性。这样可以避免不必要的（丑陋的）增量
id
属性。类似于：

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

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

函数myFunc（$target\u div，num\u按钮）{
var按钮=[]；
对于（变量i=0；i

我的建议是为每个按钮指定一个
数据
属性，单击按钮时可以读取该属性。这样可以避免不必要的（丑陋的）增量
id
属性。类似于：

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

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

函数myFunc（$target\u div，num\u按钮）{
var按钮=[]；
对于（变量i=0；i

啊，好的，那么当调用doButtonPress时，它将自动引用被单击以调用它的按钮？酷。谢谢！@baixiwei没问题。如果这个答案有帮助，请不要忘记单击左侧的绿色勾号。啊，好的，那么当调用doButtonPress时，它将自动引用被单击以调用它的按钮？酷.谢谢！@baixiwei没问题。如果这个答案有帮助的话，别忘了点击左边的绿色勾号。太好了-谢谢！我喜欢这个解决方案，因为它允许doButtonPress不知道任何关于按钮的信息，就像我想的那样。尽管我想如果我想更改名称的话，我应该这样做！：）太好了-谢谢！我喜欢这个解决方案，因为它允许doButtonPress不知道任何关于按钮的信息，就像我想的那样。尽管我想如果我想更改的话，我应该更改名称！：）