Jquery handler called only once

Question

I need to do something when I click on the grid pager.

This is the HTML where the pager is. The css class is dxp-num

I have added this code in the document.ready

$(document).ready(function () {
    $(".dxp-num").click(function () {
        alert("The pager was clicked.");
    });
});

I have tried to add the same code outside the document.ready. the alert is showing only once in both examples. I need to enter on that click event every time I click on a page number.

Possible duplicate of [jQuery how to bind onclick event to dynamically added HTML element](https://stackoverflow.com/questions/1525664/jquery-how-to-bind-onclick-event-to-dynamically-added-html-element) — Pete, Apr 23 '18 at 11:44
You want a `delegated event handler`. See `.on`. `$(".dxpLite_Office2003Olive").on('click', .dxp-num, function() {})`. — deEr., Apr 23 '18 at 11:47
something like `$('body').on("click",".dxp-num",function(){.............});` — Suresh Ponnukalai, Apr 23 '18 at 11:47

score 2 · Answer 1 · answered Apr 23 '18 at 11:46

2

Try with:

$(document).ready(function () {
    $("#gvPartners_DXPagerBottom").on("click", ".dxp-num", function () {
        alert("The pager was clicked.");
    });
});

answered Apr 23 '18 at 11:46

Boky

8,942
19
69
134

score 2 · Accepted Answer · answered Apr 23 '18 at 11:47

Thinks your page elements are added dynamically. If it is so, use jquery on rather than binding click to the element.

$(document).ready(function () {
    $("body").on("click", ".dxp-num", function () {
        alert("The pager was clicked.");
    });
});

score 1 · Answer 3 · answered Apr 23 '18 at 11:59

If you added those element dinamically (after DOM creation, via javascript) then they won't respond to a bind created earlier than their creation. You need delegated event handler. That means: a parent (not created dinamically) will recieve the event and pass it to their childs:

$(".dxpLite_Office2003Olive").on("click", ".dxp-num", function() {
    alert("The pager was clicked.");
});

or

$("#gvPartners_DXPagerBottom").on("click", ".dxp-num", function() {
    alert("The pager was clicked.");
});

you can use ANY parent, no matter how far, as long as it's been created before:

$("body").on("click", ".dxp-num", function() {
    alert("The pager was clicked.");
});

Jquery handler called only once

3 Answers3