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

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

Answer 1

我认为你可以使用use event delegation来解决这个问题。

事件委托是一种通过单个共同父母而不是每个孩子来回应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处理大量点击事件的更好解决方案

3 个答案: