我正在尝试使用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是未定义的?到目前为止我能做到这一点吗?
那么......我该怎么办? : - )
答案 0 :(得分:3)
您的代码无效,因为变量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
});
}
答案 1 :(得分:1)
我的建议是为每个按钮分配一个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);
}