javascript - 使用 jquery 的点击事件进行分页

Question

我想要做的是我有一个分页元素列表，并且我有一个每次单击页面时都想调用的函数。这是我当前的代码

function get_alerts(page){
    console.log('calling get_alerts');
    $.getJSON('/api/import_preview?p=1', function(data){
        $('#alerts').empty();
        $.each(data, function(key, val){
            $('#alerts').append(key);

        });
        populate_pagination(page, data['num_pages'])
    });
};

function populate_pagination(current_page, total_pages){
    var i;
    var page_element;
    $('.pagination').empty();
    for (i=current_page-5; i<current_page+5; i++)
    {
        console.log('i='+i)
        console.log('current_page='+current_page)
        if (i>0 && i<=total_pages){
            console.log('creating new element');
            page_element = $('<li><a href="#!">'+i+'</a></li>')
            page_element.addClass('waves-effect');
            //page_element.attr('onclick', 'get_alerts('+i+');');
            if (i==current_page){
                page_element.addClass('active');
            }
            else{
                page_element.click(function(event){get_alerts($(this).text());});
            }
            $('.pagination').append(page_element);
        };
    };
};

如果我使用 onclick 方法，一切都会很好。但如果我采用点击方法，就会发生一些非常奇怪的事情，当我点击第 5 页时，它实际上添加了 1-54 页面，而不是添加 1-10 页面。然后我想知道，我知道它没有多次调用 get_alerts 。我验证了 current_page+5 是一个静态数字，另一方面，即使有条件 i，i 也会继续上升

Answer 1

您需要将 current_page 转换为 int，因为 .text() 返回字符串。尝试:

之前:page_element.click(function(event){get_alerts($(this).text());});

之后:page_element.click(function(event){get_alerts(parseInt($(this).text(),10));});

如果您愿意，可以添加一些 NaN 检查。