使用Javascript / JQuery动态创建带有不同点击事件处理程序的多个HTML按钮 [英] Use Javascript / JQuery to dynamically create multiple HTML buttons with different click event handlers

问题描述

我想使用Javascript / JQuery来动态创建多个HTML按钮，每个按钮在点击时都会有所不同。

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

  function myFunc（target_div，num_buttons）{
 var buttons =; 
 for（var i = 0; i  buttons + ='< input type =buttonid =button _'+ i +'value =button _'+ i + '>< / input>'; 
} 
 target_div.html（buttons）; 
 var doButtonPress = function（i）{
 alert（i）; //我实际上在这里做更复杂的事情，但现在不重要
} 
 for（var i = 0; 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是未定义的？我到目前为止是否正确？
 
 
 
那么，我该怎么办？ ： - ）
解决方案
您的代码无效，因为变量 i 这将是 num_button 始终在处理程序内部。你可以通过将它包装在闭包中来修复它，但是如何通过添加一个类并使用按钮的id来简化它。
  function myFunc（target_div，num_buttons）{
 var buttons =; 
 for（var i = 0; i  //添加类---------------- v 
按钮+ = '< input type =buttonid =button _'+ i +'class =mybuttonsvalue =button _'+ i +'>< / input& 
} 
 target_div.html（buttons）; 
 var doButtonPress = function（i）{
 alert（i）; //我实际上在这里做更复杂的事情，但现在不重要
} 
 
 //是的，mybuttons存在
 $（'。mybuttons'）。 ）{
 doButtonPress（this.id.replace（'button_'，''））; 
 //this.id.replace('button_'，''）< - 返回i值
}）; 
} 
  
 
I am trying to use Javascript / JQuery to dynamically create several HTML buttons, each of which does something different when it is clicked.

My first attempt looked like this:
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); } );
    }
}
Unfortunately this doesn't work because (I think) when the click event happens, doButtonPress is always passed the current value of i in myFunc's scope, not - as I intended - the value i had when the click event was defined. Thus the value passed to doButtonPress is always equal to num_buttons regardless of which button is pressed. So I then tried this instead:
$('#button_'+i).click( new Function( "doButtonPress("+i+");" ) );
Unfortunately this doesn't work either - I get a message "ReferenceError: Can't find variable: returnResult". I assume that's because the Function constructor's arg value isn't parsed until the click event happens, and at that time I'm already outside of myFunc's scope so doButtonPress is undefined? Am I getting this right so far?

So ... what do I do? :-)
解决方案
Your code didn't work because of the scope of variable i which would be num_button always inside the handler. You can fix it by wrapping it inside a closure but how about simplifying it by adding a class and making use of the id of the button.
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
    });
}


                        
这篇关于使用Javascript / JQuery动态创建带有不同点击事件处理程序的多个HTML按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！