重新加载JavaScript，无需重新加载页面

Question

我有一个PHP页面，当我使用过滤器或单击一页分页时，我会重新加载一个div。我对分页有问题，因为仅适用于第一次。我认为我需要在div的内容发生变化时重新加载分页脚本而不重新加载页面。

这是我需要重用的功能：

   $('li.page').on('click', function() {
        var clicked = $(this).find('a').text();
        var paginations = $('ul.pagination');
        var previous = paginations.find('li.page.active');
        previous.removeClass('active');
        var links = paginations.find('li.page');
        links.each(function() {
            if ($(this).find('a').text() == clicked) {
                $(this).addClass('active');
            }
        });
        $('#page').text(clicked);
        showItems();
        //location.reload(); //aktualizuje celou stránku
    });  

更新div内容的另一个函数：

    function showItems() {
         var nazevkat = document.getElementById("nazevkat").innerHTML;
         var kategorie = document.getElementById("kategorie").innerHTML;
         var podkategorie = document.getElementById("podkategorie").innerHTML;
         var razeni = document.getElementById("razeni").value;    
         vyhledavani = document.getElementById("vyhledavani").innerHTML;
         vyhledavani = vyhledavani.replace(/ /gi, "+");    
         var start = document.getElementById("start-interval-2").value;
         var end = document.getElementById("end-interval-2").value;

       var vyrobce = $('#vyrobci :checked');
       var vyrobci = "";
       for (var i = 0; i < vyrobce.length; i++) {
              vyrobci += vyrobce[i].value + "+";
        }
        vyrobci = vyrobci.substring(0, vyrobci.length - 1);

        var dostupnosti = $('#dostupnosti :checked');
        var dostupnost = "";
        for (var i = 0; i < dostupnosti.length; i++) {
            dostupnost += dostupnosti[i].value + "+";
        }
        dostupnost = dostupnost.substring(0, dostupnost.length - 1);   
        var page = document.getElementById("page").innerHTML;

        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }

        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("page-content-items").innerHTML = xmlhttp.responseText;
            }
        };

        var newUrl = getCutURL(kategorie, podkategorie, razeni, vyhledavani, start, end, vyrobci, dostupnost, nazevkat, page);
        history.pushState('', 'Alter URL', newUrl.replace("getItems", "produkty"));

        var url = getURL(kategorie, podkategorie, razeni, vyhledavani, start, end, vyrobci, dostupnost, "", page);
        xmlhttp.open("GET", url, true);
        xmlhttp.send();    
    }

Answer 1

也许是解决你的问题

$.fn.myClick= function (callback) {
        $(document).on('click', $(this).selector, function(event) { // this (jQuery) method is working
            callback($(this));
            event.preventDefault();
        });
        return $;
    };

$('li.page').myClick(function($this){
    var clicked = $this.find('a').text();
        var paginations = $('ul.pagination');
        var previous = paginations.find('li.page.active');
        previous.removeClass('active');
        var links = paginations.find('li.page');
        links.each(function() {
            if ($this.find('a').text() == clicked) {
                $this.addClass('active');
            }
        });
        $('#page').text(clicked);
        showItems();
        //location.reload(); //aktualizuje celou stránku
});

使用heavenPG，你需要阅读文档 https://github.com/rachmanzz/heavenPG

首先：定义heavenPG Construct

var pagination = heavenPG({
id : 'ul.pagination',
total:10, // total page
current:3, // current page active
onclick:function(page){
    console.log('current page :'+page); // page number clicked
}
});
pagination.execute();

制作定义列表（使用引导程序组件L http://getbootstrap.com/components/#pagination）

<ul class="pagination">
</ul>

并且不要忘记加载jQuery和boostrap libary

示例：http://rachmanzz.github.io/heavenPG/

Answer 2

更改触发器非常有效！

    $('.page-content').on('click', 'li.page', function() {
        var clicked = $(this).find('a').text();
        var paginations = $('ul.pagination');
        var previous = paginations.find('li.page.active');
        previous.removeClass('active');
        var links = paginations.find('li.page');
        links.each(function() {
            if ($(this).find('a').text() == clicked) {
                $(this).addClass('active');
            }
        });
        $('#page').text(clicked);
        showItems();
    });