JQuery .click function not working for contained tags

Go To StackoverFlow.com

0

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...

2012-04-04 21:06
by Jon
Chances are the DOM isn't ready when your code runs. Put it in a DOM ready event handler - James Allardice 2012-04-04 21:09


3

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.

2012-04-04 21:10
by Selvakumar Arumugam
mm.. Someone downvoted for no reason : - Selvakumar Arumugam 2012-04-04 21:13
Where does the .on go? Yes the
  • are generated dynamicall - Jon 2012-04-04 21:14
  • @Jon Updated with .on. When I said dynamic, it means the li are inserted into the ui or the whole ul is generated at runtime using javascript - Selvakumar Arumugam 2012-04-04 21:15
    Got it! The function is triggering now. Thank you - Jon 2012-04-04 21:21


    3

    Put it in a document.ready

    $(function(){ 
        $("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();
           });
    }); 
    
    2012-04-04 21:10
    by aziz punjani


    1

    Try:

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

    You missed the a in your selector. Make sure the DOM is ready $(document).ready. And where is the order variable coming from? Is order defined?

    2012-04-04 21:08
    by iambriansreed
    Still not working :/ I also tried just doing "div.pagination a" in the selector...no luck - Jon 2012-04-04 21:09
    @Jon Yeah you are referencing a variable order here: $("input[name='order']").val(order);. Where is that coming from - iambriansreed 2012-04-04 21:09
    How'bout div.pagination ul li, or div.pagination ul li a? I'm pretty sure you can't skip the ul - Sprachprofi 2012-04-04 21:10
    @Sprachprofi Yes, yes you can - iambriansreed 2012-04-04 21:10
    This works, but now the links don't work...it's not sending me to the next page - Jon 2012-04-04 21:14
    Then remove event.preventDefault(); - iambriansreed 2012-04-04 21:15
    Thank you! I really appreciate the help - Jon 2012-04-04 21:22
    Glad I could help. Accept please - iambriansreed 2012-04-04 21:24
    Ads