Question

I have a pagination page based on dropdown list and on change loaded as

$("select#opt-category").change(function () {
                    $(".showgrid").load('portal.php?category='+category);

                    });

in portal.php(which is also post as ajax to pagination.php

if(isset($_GET['category'])) $catgory=$_GET['category'];


    <script type="text/javascript">

            function loading_show(){
                $('#loading').html("<img src='assets/img/ajax-loader.gif'/>").fadeIn('slow');
            }
            function loading_hide(){
                $('#loading').fadeOut('slow');
            }                
            function loadData(page,category){
                loading_show(); 

                $.ajax
                ({

                    type: "POST",

                    url: "pagination_data.php",
                    data: {'page':page,'category':category},

                    success: function(msg)
                    {
                        $("#container").ajaxComplete(function(event, request, settings)
                        {
                            loading_hide();
                            $("#container").html(msg);
                        });
                    }
                });
            }


        loadData(1,<?php echo $catgory?> )  
                      // For first time page load default results
            $('#container .pagination li.active').live('click',function(){
                event.stopPropagation();
                var page = $(this).attr('p');
                var category= $(this).attr('q');

                loadData(page,category);

                //break;

            });

            $('#go_btn').live('click',function(){
                var page = parseInt($('.goto').val());
                var category = parseInt($('.total').attr('b'));


                var no_of_pages = parseInt($('.total').attr('a'));
                if(page != 0 && page <= no_of_pages){
                    loadData(page,category);
                }else{
                    alert('Enter a PAGE between 1 and '+no_of_pages);
                    //$('.goto').val("").focus();
                    return false;
                }

            });

    </script>

It shows all the pagination correctly but clicking on pages fire multiple Ajax call to pagination_data.php and how do i change to .on()

thanx

Answer 1

Use the element closest to the button, which is not loaded dynamically (document in extreme cases). Then attach the handler on it, and use the button’s selector (the id in your case) as the selector for the delegated event.

Assuming your #container is that static element:

$('#container').on('click', '.pagination li.active', function(){…});

$('#container').on('click', '#go_btn', function(){…});