未捕获的类型错误:如何修复 jQuery 冲突?

我正在使用 Python Flask 开发一个 Web 应用程序。我需要一个 jQuery 脚本来创建自动完成搜索字段。我找到了这个:

https://github.com/LukasSliacky/Flask-Autocomplete

它工作得很好。

当我尝试将此功能集成到包含许多其他 CSS 和 JS 脚本的现有模板中时,问题就来了。

这是我的文件:

<!DOCTYPE html>

<html>

<head>


    <meta charset="utf-8">

    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>


    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="{{ url_for('static', filename='css/materialdesignicons.min.css')}}">

    <link rel="stylesheet" href="{{ url_for('static', filename='css/vendor.bundle.base.css')}}">

    <link rel="stylesheet" href="{{ url_for('static', filename='css/dataTables.bootstrap4.css')}}">

    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css')}}">

    <link rel="shortcut icon" href="{{ url_for('static', filename='images/favicon.ico') }}">


</head>

<body>

<div class="container-scroller">


     {{ form.autocomp.label }}: {{ form.autocomp }}


</div>




    <script src="{{ url_for('static', filename='js/vendor.bundle.base.js')}}"></script>


    <script src="{{ url_for('static', filename='chart.js/Chart.min.js')}}"></script>

    <script src="{{ url_for('static', filename='js/jquery.dataTables.js')}}"></script>

    <script src="{{ url_for('static', filename='js/dataTables.bootstrap4.js')}}"></script>


    <script src="{{ url_for('static', filename='js/off-canvas.js')}}"></script>

    <script src="{{ url_for('static', filename='js/hoverable-collapse.js')}}"></script>

    <script src="{{ url_for('static', filename='js/template.js')}}"></script>



胡子哥哥
浏览 84回答 1
1回答

眼眸繁星

这会加载 jQuery(一个古老的、不受支持的 jQuery 版本,其中存在已知的安全问题,但 jQuery 仍然如此):<script&nbsp;type="text/javascript"&nbsp;src="http://code.jquery.com/jquery-latest.js"></script>这将加载 jQuery UI(也是一个过时的版本),它添加了autocomplete插件。<script&nbsp;type="text/javascript"&nbsp;src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>所以那个点$('#city_autocomplete').autocomplete应该是一个函数。然后你加载一堆其他的东西,我们只有文件名可以继续。您暗示上面的所有内容都是专门为此任务添加的,因此您有:&nbsp;<script&nbsp;src="{{&nbsp;url_for('static',&nbsp;filename='js/jquery.dataTables.js')}}"></script>…我们可以假设前两行之一已经加载了 jQuery。&nbsp;&nbsp;&nbsp;&nbsp;<script&nbsp;src="{{&nbsp;url_for('static',&nbsp;filename='js/vendor.bundle.base.js')}}"></script>……是最有可能的候选人。新版本的 jQuery 会覆盖您添加 jQuery UI 的版本,因此该autocomplete插件会消失。不要加载 jQuery 两次。加载一次。首先加载它。然后向其中添加 jQuery UI。
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript