0

我正在使用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 调用创建的。有什么帮助吗？

4

1 回答 1

0

你需要将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
            });
        });
    });
});

希望能帮助到你。

于 2013-07-20T11:13:56.487 回答