Плагин tcrosen typeahead не работает с динамически созданным вводом

Я использую плагин tcrosen typeahead, и он отлично работает, когда я использую его для статического ввода, но при использовании его на динамически созданном вводе плагин не выполняется должным образом. Я попытался отладить свой код с помощью firebug и заметил, что параметры не используются!

Вот как я это использую:

    function displayResult(item, val, text) {
       console.log(item);
       $('.alert').show().html('You selected <strong>' + val + '</strong>: <strong>' + text + '</strong>');
    }
    $('.typeahead-input').typeahead({
       ajax: { url: 'carsController.php?method=searchNames', triggerLength: 1 }, 
       itemSelected: displayResult
    });

это код, который получает динамический ввод:

    $("#add-typeahead").click(function(){
       $.ajax({url:"ajaxController.php?method=typeahead",success:function(data){
        $("body").append(data);
       });
    });

HTML:

     <button id="add-typeahead">add typeahead</button><br>

Результат вызова ajax, вызванного кнопкой:

    <input type="text" class="typeahead-input"  data-provide="typeahead" />

Обратите внимание, что входные данные, имеющие class=".typeahead-input", создаются вызовом ajax, запускаемым кнопкой . Любая помощь?


jquery twitter-bootstrap typeahead bootstrap-typeahead jquery-events
person mehsen    schedule 19.07.2013    source источник
comment
Где код, который создает '.typeahead-input'?   -  person Hieu Nguyen    schedule 20.07.2013
comment
Я обновил ответ, чтобы сделать его более понятным :)   -  person mehsen    schedule 20.07.2013

Ответы (1)


arrow_upward
0
arrow_downward

Вам нужно поместить код инициализации typeahead в обратный вызов success первого ajax, это нужно сделать после ввода, то есть после append(). Поскольку append() является синхронизацией и не обеспечивает обратного вызова, вы можете использовать each() для обходного пути. Так что это будет что-то вроде этого:

$("#add-typeahead").click(function(){
    $.ajax({url:"ajaxController.php?method=typeahead",success:function(data){
        $("body").append(data).each(function () {
            function displayResult(item, val, text) {
               console.log(item);
               $('.alert').show().html('You selected <strong>' + val + '</strong>: <strong>' + text + '</strong>');
            }

            $('.typeahead-input').typeahead({
               ajax: { url: 'carsController.php?method=searchNames', triggerLength: 1 }, 
               itemSelected: displayResult
            });
        });
    });
});

Надеюсь, поможет.

person Hieu Nguyen    schedule 20.07.2013
comment
Я попробовал ваше решение, и оно отлично работает для меня. Большое спасибо :) - person mehsen; 20.07.2013