未捕获的类型错误：如何修复 jQuery 冲突？

Question

我正在使用 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>

    <script src="{{ url_for('static', filename='js/dashboard.js')}}"></script>
    <script src="{{ url_for('static', filename='js/data-table.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/jquery.cookie.js')}}" type="text/javascript"></script>


    <script>
        $(function() {
            $.ajax({
                url: '{{ url_for("autocomplete") }}'
                }).done(function (data){
                    $('#city_autocomplete').autocomplete({
                        source: data,
                        minLength: 2
                    });
                });
            });
    </script>


</body>


</html>

当我尝试时，它显示一些错误控制台：

因此，在搜索解决方案后，我尝试删除其中一些 jquery 文件：

<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>

，但我仍然有同样的问题。

有谁知道如何解决我的特殊情况？

这是我的 Flask Python 代码：

from flask import Flask, Response, render_template, request
import json
from wtforms import TextField, Form

class SearchForm(Form):
    autocomp = TextField('Insert City', id='city_autocomplete')


@app.route('/_autocomplete', methods=['GET'])
def autocomplete():
    return Response(json.dumps(list_result), mimetype='application/json')


@app.route('/testsearch', methods=['GET', 'POST'])
def index():
    form = SearchForm(request.form)
    return render_template("search.html", form=form)

Answer 1

这将加载 jQuery（一个古老的、不受支持的 jQuery 版本，其中存在已知的安全问题，但 jQuery 仍然存在）：

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

这将加载 jQuery UI（也是一个过时的版本），它添加了autocomplete插件。

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

所以那个点$('#city_autocomplete').autocomplete应该是一个函数。

然后你加载了一堆其他的东西，我们只有文件名可以继续。

您暗示上述所有内容都是专门为此任务添加的，因此您有：

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

...我们可以假设前两行之一已经加载了 jQuery。

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

……是最有可能的候选人。

新版本的 jQuery 会覆盖您添加 jQuery UI 的版本，因此autocomplete插件消失了。

不要加载 jQuery 两次。

加载一次。

首先加载它。

然后向其中添加 jQuery UI。

未捕获的类型错误：如何修复 jQuery 冲突？

问题描述

1 个解决方案

解决方案1
2 已采纳 2020-11-13 14:01:38

未捕获的类型错误：如何修复 jQuery 冲突？

问题描述

1 个解决方案

解决方案1 2 已采纳 2020-11-13 14:01:38

解决方案1
2 已采纳 2020-11-13 14:01:38