Невозможно получить доступ к jquery в функции. Вопрос с переменной областью?

Question

Моя конечная цель - иметь динамическое автозаполнение при вводе текста, используя библиотеку 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> 

Я объяснил в комментарии, где проблема. Автозаполнение работает для первого статического входа. Но второй динамически добавленный вход не предлагает автозаполнения, который, как я подозреваю, должен уничтожить typeahead и повторить его снова. Я предполагаю, что этот объект внутри функции addAuthor() не указывает на то же «это», которое находится за пределами $ (document) .ready (function() {}). Как я могу это решить? Я не могу уничтожить и повторно инициализировать систему typeahead, когда пользователь нажимает кнопку добавления или удаления.

Официальная ошибки я получаю:

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

---

Update: Это не связанно с забывая включить библиотеку Jquery, эти библиотеки, которые я включил до сих пор (я использую Laravel поэтому форматирование немного нечетно). Я думаю, это связано с «областью». Автозаполнение фактически работает! поэтому это означает, что библиотека «typeahead» включена правильно. Он просто не работает, когда я вызываю typeahead из «внутри функции».

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

Answer 1

OK Я нашел эту проблему самостоятельно. Проблема возникает из-за того, что я использую Laravel и добавляет некоторые скрипты через app.js на кнопку моего представления, которая вызывает эту проблему.

Вероятно, структура Laravel добавляет библиотеку jQuery сама по себе, и два экземпляра ее вызывает эту проблему. Исправление сценариев Laravel решило проблему.

Answer 2

Вещь, которую вы сделали неправильно, вызывает typeahead_initialize() в скрипте напрямую. Поместите эту функцию в document.ready, и все пройдет гладко.

Я просто скопировал свой код и сделал некоторые проверки изменения jsfiddle ниже, см войти console также

https://jsfiddle.net/Ld1wcy03/