Question

我正在使用tcrosen typeahead plugin，当我在静态输入上使用它时它工作正常，但是当在动态创建的输入上使用它时，插件执行得不好。我尝试使用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调用创建的。有什么帮助吗？

Answer 1

您需要将typeahead初始化代码放在第一个ajax的success回调中，应该在之后添加输入，所以在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
            });
        });
    });
});

希望它有所帮助。

tcrosen typeahead插件在动态创建的输入上不起作用

1 个答案: