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

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

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

function myFunc( target_div, num_buttons ) { var buttons=""; for ( var i=0; i<num_buttons; i++ ) { buttons += ''; } 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是未定义的? 我到目前为止是否正确?

那么……我该怎么办? 🙂

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

 function myFunc( target_div, num_buttons ) { var buttons=""; for ( var i=0; i'; } 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 }); } 

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

 function myFunc($target_div, num_buttons) { var buttons = []; for (var i = 0; i < num_buttons; i++) { buttons.push($('')); } $target_div.append(buttons); var doButtonPress = function() { alert($(this).data('id')); } $(".button").click(doButtonPress); } 

示例小提琴