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

Question

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

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

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。 有没有更好的方法来实现这个？请帮我解决这个问题，任何帮助将不胜感激。谢谢

Answer 1

我想你可以使用事件委托来解决这个问题。

事件委托是一种通过单个共同父对象而不是每个子对象响应 ui 事件的机制。

更多关于事件委托可以参考this堆栈溢出问题

在你的情况下，最好使用事件委托

您可以使用下面的代码

$(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 的解决方案，它也可以正常工作

Answer 2

您想要 jQuery 的 on 功能，沿着这些方向...

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

Answer 3

$(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.

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

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

javascript

jquery

anonymous-function