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

Question

I have a large number of buttons in my page and i want to add a click event to each of the buttons , that is when the user click the buttons it shows the corresponding button value.

i have already implement a method with the help of anonymous functions. i have included my code below

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

It is working perfectly, the problem is an anonymous function is created for each button on this Form, that is if i have 10k elements in my page then anonymous function will created 10k times, i think i causes big memory wastage. Is there any better way for achieving this ? please help me to solve this , any help will be greatly appreciated . Thanks

You're worrying (largely) unnecessarily. Your code creates **one** anonymous function and attaches it as a click handler many times. — Roamer-1888, Feb 23 '15 at 06:33
@Roamer-1888 sorry i can't get you , please correct me if i am wrong, i think my approach will cause a memory wastage am i right ? — nikesh gupta, Feb 23 '15 at 06:40
No. **There's only one function**. There is an inefficiency in attaching it, in that `$(".myclass")` must rediscover many input nodes in the DOM. It would be more efficient to define the click handler as a named function before the loop, and make the attachment in the loop. — Roamer-1888, Feb 23 '15 at 06:45

score 0 · Accepted Answer · edited May 23 '17 at 12:06

0

I think you can use use event delegation For solving this problem .

event delegation is a mechanism of responding to ui-events via a single common parent rather than each child.

More about event Delegation you can refer this stack overflow question

In you case it is better to use event delegation

You can use the following code

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

You can check this I have included a example with this DEMO

Or You can Adopt Chris's Solutions, it will also works fine

edited May 23 '17 at 12:06

Community

1
1

answered Feb 23 '15 at 06:26

Arunprasanth K V

17,147
8
33
63

If efficiency is the issue, then do it like **[this](http://jsfiddle.net/ut766vda/1/)** – Roamer-1888 Feb 23 '15 at 07:00
@Roamer-1888 superb solution – Arunprasanth K V Feb 23 '15 at 07:03
@nikeshgupta check Roamer's solution or Chris's – Arunprasanth K V Feb 23 '15 at 07:04

score 0 · Answer 2 · answered Feb 23 '15 at 06:29

0

You want jQuery's on function, along these lines...

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

answered Feb 23 '15 at 06:29

ChrisV

1,289
8
14

@nikeshgupta check Roamer's comment under my post, he had included a fiddle solution – Arunprasanth K V Feb 23 '15 at 07:06

Pushker Yadav · Answer 3 · 2015-02-23T07:24:32.160

0

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

edited Feb 23 '15 at 07:24

answered Feb 23 '15 at 06:31

Pushker Yadav

776
1
6
14

where did i place your code in my question ?? can you please provide an example – nikesh gupta Feb 23 '15 at 06:39

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

3 Answers3