无法在函数中访问 jquery。 "Variable Scope" 问题？

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>

我在评论中解释了问题出在哪里。自动完成适用于第一个静态输入。但是第二个动态添加的输入不提供自动完成，我怀疑我必须销毁提前输入并重新运行它。我猜想 addAuthor() 函数中的 'this' 对象并不指向 $(document).ready(function() {}) 之外的同一个 'this'。我该如何解决这个问题？当用户单击添加或删除按钮时，我无法销毁和重新初始化预输入系统。

我得到的官方错误是：

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

更新：这与忘记包含 jquery 库无关，这些是我到目前为止包含的库（我使用 Laravel 所以格式有点奇怪）我猜它与 "scope"。自动补全确实有效！所以这意味着 "typeahead" 库被正确包含。当我从 "inside a function" 调用 typeahead 时，它就不起作用了。

<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 库，并且它的两个实例导致了这个 issue.Removing Laravel 脚本解决了这个问题。

无法在函数中访问 jquery。 "Variable Scope" 问题？

Can not access jquery in function. "Variable Scope" issue?

javascript

jquery

typeahead.js