无法在函数中访问jquery。 ＆＃34;可变范围＆＃34;问题？

Question

我的最终目标是使用typeahead jquery库对文本输入进行动态自动完成。

在我的HTML中，我将输入文本字段设置为：

<input class="typeahead form-control" name="author_1" id="author_1" type="text"
               placeholder="Type a part of author name or surname"> 

然后在javascript中我有这个：

<script type="text/javascript">

function typeahead_initialize() {
    var path = "{{ route('instructor_name') }}";
    $('.typeahead').typeahead({
        source:  function (query, process) {
            return $.get(path, { query: query }, function (data) {
                return process(data);
            });
        }
    });
}

typeahead_initialize ();

 // Here typeahead is recognized as a function

 // $('.typeahead').typeahead('destroy');  

// Begin jQuery
$(document).ready(function() {
    $("#addAuthorBtn").click(function() {
        addAuthor();
    });

    $("#removeAuthorBtn").click(function() {
        removeAuthor();
    });

    function addAuthor () {
        // Destroy the typeahead system
        // The problem is here: typeahead is not recognized
        // as a functon here. It seems I can not reach
        // jquery functions here.
        $('.typeahead').typeahead('destroy');

        // I add the dynamic input here, I deleted the unrelated code

        // Reinitialize typeahead system again to include
        // the dynamically added text input
        typeahead_initialize ();
    }

    function removeAuthor () {
        // Destroy the typeahead system
        $('.typeahead').typeahead('destroy');

        // I remove the dynamic input here, I deleted the unrelated code

        // Reinitialize typeahead system again to include
        // the dynamically added text input
        typeahead_initialize ();
    }

});
</script>

我在评论中解释了问题所在。自动完成适用于第一个静态输入。但第二个动态添加的输入不提供自动完成，我怀疑我必须销毁先行并再次重新运行。我猜这个＆＃39;这个＆＃39; addAuthor（）函数里面的对象并没有指向同一个＆＃39;这个＆＃39;它位于$（document）.ready（function（）{}）之外。我怎么解决这个问题？当用户点击添加或删除按钮时，我无法销毁并重新初始化预先输入系统。

我得到的官方错误是：

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

更新： 这与忘记包含jquery库无关，这些是我到目前为止所包含的库（我使用的是Laravel，因此格式有点奇怪）我猜它与＆＃34; scope＆＃34;有关。自动完成实际上有效！所以这意味着＆＃34;打字＆＃34;图书馆包含正确。当我从＆＃34;函数内部调用typeahead＆＃34;时，它就无法工作。

<script src="{{ URL::to('js/jquery-3.1.1.js') }}"></script>
<script src="{{ URL::to('js/bootstrap3-typeahead.min.js') }}"></script>

Answer 1

你做错了是直接在脚本中调用typeahead_initialize()。将此功能放在document.ready中，一切顺利。

我刚刚复制了你的代码并做了一些修改检查下面的jsfiddle，请参阅登录console

https://jsfiddle.net/Ld1wcy03/

Answer 2

好的，我自己发现了这个问题。问题来了，因为我使用Laravel并且它在我的视图按钮上通过app.js添加了一些脚本导致了这个问题。

可能Laravel框架本身添加了jQuery库，它的两个实例导致了这个问题。移除Laravel脚本解决了这个问题。