我有一个基于下拉列表和加载为的更改的分页页面

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

                    });


在portal.php中(也作为ajax发布到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>






        

        





它正确显示了所有分页,但是单击页面会触发对pagination_data.php的多个Ajax调用,以及如何更改为.on()

谢谢

最佳答案

使用最接近按钮的元素,该元素不会动态加载(在极端情况下为document)。然后在其上附加处理程序,并使用按钮的选择器(本例中的ID)作为delegated event的选择器。

假设您的#container是该静态元素:

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

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

10-05 20:43
查看更多