Question

使用Javascript：

$('#pagination-demo').twbsPagination({
    totalPages: 35,
    visiblePages: 7,
    onPageClick: function (event, page) {
        console.log('Why does this run on load?');
    }
});

标记：

<!DOCTYPE html>
<html>

<head>
    <script src="http://code.jquery.com/jquery.min.js"></script>
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

    <script src="http://esimakin.github.io/twbs-pagination/js/jquery.twbsPagination.js"></script>
    <meta charset="utf-8">
    <title>JS Bin</title>
</head>

<body>
    <ul id="pagination-demo" class="pagination-sm"></ul>
</body>

</html>

JS Bin：http://jsbin.com/potekina/1/edit

在onPageClick回调中，我登录到控制台＆＃34;为什么这会在加载时运行？＆＃34;我不明白为什么代码在加载时运行，如果它只在链接被点击时发生。为什么它会在负载下运行？

Answer 1

可以在init中添加选项：

$('.pagination').twbsPagination({
    initiateStartPageClick: false
});

Answer 2

来自the source：

init: function (options) {
   ...
   this.$element.bind('page', this.options.onPageClick);
   ...
   this.$element.trigger('page', this.options.startPage);
}

twpsPagination插件显然在init中触发onPageClick。这是插件的特性，而不是代码中的异常。我们无法回答作者的推理是什么样的设计选择。

据推测，该活动主要用于帖子页面渲染设置，他们猜测它与后续页面加载一样与设置初始页面相关，但我会告诉你“页面点击”是那时候有点用词不当。

如果您确实希望仅在实际页面点击时运行脚本，则必须执行一些变通方法，例如变量：

var firstPageClick = true;

onPageClick: function() {
   if(firstPageClick) {
       firstPageClick = false;
       return;
   }

   // actual event listener
}

为什么我的回调中的代码在页面加载时执行？

2 个答案: