0

我有一个显示产品的页面。产品通过 ajax 请求显示。产品中包含分页按钮。这是我的 $('document').ready(function(){

    $.ajax({
            url: '<?=base_url().'catalog/show_listings';?>',
            type:'POST',
            dataType: 'json',
            success: function(data){
                    $('#result_container').html(data);
                }, // End of success function of ajax form
             complete : function(){
                    $('ul#pag-link > li > a').click(function(){

                        var link = $(this).attr('href')

                        $.ajax({
                            url: '<?=base_url().'catalog/show_listings';?>',
                            type:'GET',
                            dataType: 'json',
                            success: function(listings){
                                    $('#result_container').html(listings);
                                } // End of success function of ajax form       
                         }); // End of ajax call                            

                        return false;
                    });
                }
            }); // End of ajax call

在第一次 ajax 调用成功时，我得到列表并将它们显示在 div #result_container 中。然后，在完成同一个 ajax 调用后，我为无序列表中的锚点创建了一个 on click #pag-link（分页按钮）。这应该返回下一组列表并再次将其显示在#result_container 中，它还将再次加载分页按钮。我完全这样做是因为我不能更早地这样做，因为分页按钮在绑定时不存在。

这是问题所在，要使其正常工作，我必须再次在 ajax 中完成为分页按钮添加 onclick 事件。对于更多产品和分页的每个 ajax 负载，我都必须这样做。

这显然不是正确的做法。有什么建议么？

4

1 回答 1

1

将事件处理委托给始终存在的容器元素。

$.ajax({
    url: '<?=base_url().'catalog/show_listings';?>',
    type:'POST',
    dataType: 'json',
    success: function(data){
        $('#result_container').html(data);
    } // End of success function of ajax form
}); // End of ajax call

$('#result_container').on('click', '#pag-link > li > a', function(){
    var link = $(this).attr('href');

    $.ajax({
        url: '<?=base_url().'catalog/show_listings';?>',
        type:'GET',
        dataType: 'json',
        success: function(listings){
            $('#result_container').html(listings);
        } // End of success function of ajax form       
    }); // End of ajax call                            

    return false;
});

并在 dom 就绪时运行它（在所有 ajax 调用之外）

（如果两个调用相同，您可以创建一个函数并使用它来避免重复代码..）

于 2013-10-09T00:09:48.363 回答