Question

I have the following function that is supposed to trigger anytime one of the numbers in my pagination is clicked.

<script type="text/javascript">
    $("div.pagination a").click(function(event) {
        alert("Click");
        event.preventDefault();
        var url = $(this).attr("href");
        $("input[name='order']").val(order);
        $("#form_session").attr('action', url).submit();
    });
</script>

The pagination looks like this:

<div class="pagination">
  <ul>
    <li><a href="results.php?page=1&agruments...">1</a></li>
    <li><a href="results.php?page=2&arguments...">2</a></li>
    ...etc
  </ul>
</div>

For some reason, the function is never firing. I even put in a very obvious alert to confirm that it’s hearing the click, but I’m not even seeing this.

So what is it that I’m doing wrong Everything seems correct to me…

Answer 1

Try to wrap it inside $(document).ready(function () { ... }); Something like below,

 $(document).ready(function () {
   $("div.pagination li").click(function(event) {
        alert("Click");
        event.preventDefault();
        var url = $(this).attr("href");
        $("input[name='order']").val(order);
        $("#form_session").attr('action', url).submit();
    });

 });

If the li is dynamically generated then you should use .on (for jQuery 1.7) or .live/.delegate (older jQuery).

 $(document).ready(function () {
   $(document).on('click', 'div.pagination li', function(event) {
        alert("Click");
        event.preventDefault();
        var url = $(this).attr("href");
        $("input[name='order']").val(order);
        $("#form_session").attr('action', url).submit();
    });

 });

Note: Replace $(document).on('click', 'div.pagination li', function(event) { with $('div.pagination').on('click', 'li', function(event) { if div.pagination exist on load.