Question

Please vote for me which one in the below list is better?

I have HTML:

<div id="container">
    <button class="btn">Click Here 1</button>
    <button class="btn">Click Here 2</button>
    <button class="btn">Click Here 3</button>
    <button class="btn">Click Here 4</button>
    <button class="btn">Click Here 5</button>
    <button class="btn">Click Here 6</button>
    <!-- A lot of buttons -->
    <button class="btn">Click Here n - 2</button>
    <button class="btn">Click Here n - 1</button>
    <button class="btn">Click Here n</button> 
</div>

And Javascript with jQuery is:

Case 1.1:

$(".btn").click(function(e){
    //@todo something here
});

Case 1.2:

var doSomething = function(e)
{
    //@todo something here
}
$(".btn").click(doSomething);

Case 2:

$("#container").click(function(e){
    if( $(e.target).is(".btn") )
    {
        //@todo something here
    }
});

I am confused a litle bit what are different between them?

Answer 1

You should use the new jQuery on() function

$(document).on("click", ".btn", doSomething);

so that

• dynamically added content will be covered
• jQuery won’t have to waste time searching out, and wrapping all affected buttons with the handler; all clicks will propogate up to the context, and jQuery will apply them if they match the selector—.btn in this case

If you know that all your buttons will be in #container, then you would use that as the context, instead of document.

$("#container").on("click", ".btn", doSomething);