trouble getting .on function to work as it is supposed to

Question

I have an html page with the following html:

<div id="content">
    <div class="pagination">
        <a href=''>blah</a>
    </div>
</div>

Going to a page that has the following js doesn't return any alert:

$("#content").on(".pagination a", "click", function(event){
    alert("alert message")
})

Going to the same page with this js does work:

$("#content .pagination a".on("click", function() {
    alert("alert message")
})

why? in the .on() API the first one is supposed to bind the delegated functionality to the content id and the second is supposed to bind it to the a tag within the content id, yet the first one doesn't happen.

What is wrong with the way I'm using on() function to delegate the click event?

Answer 1

.on() is different from .delegate()

Correct syntax for .on() is -

on( events [, selector ] [, data ], handler(eventObject) )

You need this :

$("#content").on("click",".pagination a", function(event){
    alert("asdasdasd")
})

• http://api.jquery.com/on/
• http://api.jquery.com/delegate/

Answer 2

$("#content").on("click",".pagination a", function(event){
    alert("asdasdasd")
})

Switch to the above definition