Javascript 使用Jquery处理大量点击事件的更好解决方案

我的页面中有大量的按钮，我想为每个按钮添加一个单击事件，即当用户单击按钮时，它会显示相应的按钮值

我已经在匿名函数的帮助下实现了一个方法。我已经在下面包含了我的代码

HTML

<div id="div1"/>

Javascript

$(document).ready(function(){
    for(var i =0;i<100;i++)
    {
        $("#div1").append("<input type='button' class='myclass' id='mybutton" + i + "' value='mybutton" + i + "'> ");
    };

    $(".myclass").click(function(e){
        alert(e.target.id);
    });
});

$（文档）.ready（函数（）{
对于（var i=0；i我认为可以使用事件委托来解决这个问题

事件委派是一种通过单个公共父级而不是每个子级响应ui事件的机制

有关事件委派的更多信息，您可以参考堆栈溢出问题

在您的情况下，最好使用事件委派

您可以使用以下代码

$(document).ready(function(){
    for(var i =0;i<100;i++)
    {
        $("#div1").append("<input type='button' class='myclass' id='mybutton" + i + "' value='mybutton" + i + "'> ");
    }
    $("#div1").click(function(e){
        if($(e.target).hasClass("myclass"))
           alert(e.target.id);
    });    
});

$（文档）.ready（函数（）{
对于（var i=0；i您需要jQuery的
on
函数，如下所示

$("#containerdiv").on('click', '.myclass', function() {
    alert($(this).id);
});

$（文档）.ready（函数（）{
var callback=function（）{
console.log（this.id）；
} ;
$（'#div1'）。on（'click'，'button.myclass'，callback）；
对于（var i=0；i选中jQuery.on（）…@jahroy，我肯定会看到您（主要）担心的问题不必要的。你的代码创建了一个匿名函数，并多次将其作为点击处理程序附加。@Roamer-1888我如何克服它？你没有抓住重点。没有什么需要克服的。我在我的问题中把你的代码放在哪里了？你能提供一个例子吗？如果效率是个问题，然后像@Roamer-1888那样去做吗solution@nikeshgupta检查Roamer的溶液或Chris的溶液s@nikeshgupta查看Roamer在我帖子下的评论，他包含了一个小提琴解决方案
$(document).ready(function(){
 var callback=function(){
            console.log(this.id);   
    } ;
$('#div1').on('click','button.myclass',callback);
    for(var i =0;i<100;i++)
    {
        $("#div1").append("<input type='button' class='myclass' id='mybutton" + i + "' value='mybutton" + i + "'> ");
    };


});      






this is called event delegation.