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?

I changed the asd to something else, happy? – Nachshon Schwartz May 25 '13 at 20:40 — Nachshon Schwartz, May 25 '13 at 20:40

score 2 · Answer 1 · answered May 25 '13 at 20:24

2

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

Switch to the above definition

answered May 25 '13 at 20:24

TGH

38,769
12
102
135

score 2 · Accepted Answer · answered May 25 '13 at 20:24

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

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

2 Answers2