点击按钮触发函数时出现Uncaught TypeError: $.twbsPagination is not a function错误

问题场景 #

点击id为button的按钮触发someFunc()函数时，控制台报错Uncaught TypeError: $.twbsPagination is not a function。但代码中load函数内调用$('#pagination-demo').twbsPagination()可以正常运行，在someFunc里无论是直接调用$.twbsPagination()还是通过选择器调用该方法，都会触发相同错误。

核心原因及解决方法 #

1. 重复引入jQuery导致插件绑定失效
   你的代码里先后引入了两个不同的jQuery文件：本地的jquery-3.3.1.min.js和CDN的jquery.min.js。第二次引入的jQuery会完全覆盖第一次的实例，而twbsPagination插件是绑定在第一个jQuery实例上的，后续的jQuery实例自然没有这个方法。

解决：删除其中一个jQuery引入，确保只保留一个，且jquery.twbsPagination.js在jQuery之后引入。比如删掉CDN的那行：

<script src="//code.jquery.com/jquery.min.js"></script>

2. 修复语法错误
   你提供的代码中，someFunc函数结束后多了一个多余的}，这个语法错误会导致脚本解析失败，间接影响函数执行。需要把这个多余的}删除。

3. 确保DOM与资源加载顺序
   虽然load函数能正常运行，但建议将自定义脚本放在<body>标签的末尾（如你当前的写法），确保DOM元素和插件都已完成加载，避免因元素未找到引发的关联错误。

修正后的完整代码示例 #

<html>
<head>
<script type='text/javascript' src="~/Scripts/jquery-3.3.1.min.js"></script>
<script src="~/Scripts/jquery.twbsPagination.js"></script>
</head>

<body>
...
<td>
    <button id="button" onclick="someFunc(); return false;">Display Pages</button>
</td>
<div id="pagination-demo"></div>
<div id="page-content"></div>
...
<script>
   function load() {
       $('#pagination-demo').twbsPagination({
           totalPages: 35,
           visiblePages: 7,
           onPageClick: function (event, page) {
               $('#page-content').text('Page ' + page);
           }
       });
   }
      
   function someFunc() {
      $('#pagination-demo').twbsPagination({
           totalPages: 10,
           visiblePages: 7,
           onPageClick: function (event, page) {
               $('#page-content').text('Page ' + page);
           }
       });
   }
</script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Stumpered