在JavaScript的自调用功能中初始化插件

Question

我正在尝试在我的网站上设置分页，但是我找到了一个JavaScript插件来实现此目的。

我需要在自调用功能中初始化插件，如下所示：

$(function(){

    $('#pagination').twbsPagination({
        visiblePages: 3,
        totalPages: 10,
        prev: '<<',
        next: '>>',
        first: '',
        last: '',
        pageClass: 'page-item page-item-w',
        onPageClick: function (event, page){
            ..............
        }
    });

});

但是控制台中出现错误：

TypeError: $(...).twbsPagination is not a function

当我将初始化放在自调用函数之外而不是它起作用时：

$('#pagination').twbsPagination({
    visiblePages: 3,
    totalPages: 10,
    prev: '<<',
    next: '>>',
    first: '',
    last: '',
    pageClass: 'page-item page-item-w',
    onPageClick: function (event, page){
        ..............
    }
});

$(function(){

    // ............

});

如何在自调用功能中对此进行初始化？

Answer 1

您那里没有IIFE。这就是$函数，您正在传递另一个函数作为回调。 DOM Ready事件触发时，它将调用该函数。

在您放置代码的点与DOM Ready触发（从现有状态停止$.twbsPagination）之间发生了某些事情。

通常是：

1. 加载jQuery
2. 将插件加载到jQuery
3. 再次加载jQuery ，覆盖第一个和附加的插件

不要在一个文档中多次加载jQuery。