jqueryhtmljquery-onjquery-delegate

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

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?

Solution

  • .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")
})