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

Better solution for dealing with large number of click events with Jquery

本文关键字：事件 更好 解决方案 Jquery 处理 使用      更新时间：2024-04-18

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

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

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

它运行得很好，问题是为这个表单上的每个按钮都创建了一个匿名函数，也就是说，如果我的页面中有10k个元素，那么匿名函数将创建10k次，i think i causes big memory wastage有没有更好的方法来实现这一点？请帮我解决这个问题，任何帮助都将不胜感激。感谢

我认为可以使用事件委派来解决这个问题。

事件委派是一种通过单个公共父级而不是每个子级来响应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);
    });    
});

你可以检查一下，我已经包含了一个DEMO的例子

或者您可以采用Chris的解决方案，它也可以很好地进行

您想要jQuery的on函数，沿着这些行。。。

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

$(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.
相关文章：