Unable to manipulate HTML elements using jQuery on pjax requests

Question

I have this working fine when loading the page normally (visiting the page via the addressbar):

$(function () {
    $("#verify").click(function (event) {
        event.preventDefault();
        // ...

But if I navigate to the page (that contains the button: id="verify") via pjax calls ( https://github.com/defunkt/jquery-pjax ), the JS code doesn't see the button.

It works if I hit refresh.

How can I overcome this problem?

Answer 1

It is because when you use pjax, you are dealing with dynamically created elements, in such cases you need to use event delegation

Try

$(function () {
    $(document).on('click', "#verify", function (event) {
        event.preventDefault();