Question

我使用twitter bootstrap 3 typeahead，带有猎犬建议引擎。

我已经在html表的列中的文本框（class：typeahead）中应用了此类型，并且在选择了typeahead后，会出现一个新行。

我有一个问题是将typeahead应用于这个新动态添加的文本框（也是class：typeahead）。 Chrome dev错误：“未捕获的TypeError：undefined不是函数”

这是我的JS：

<script src="<?php echo site_url('assets/js/jquery-2.0.3.min.js');?>"></script>
<script src="<?php echo site_url('assets/js/bootstrap.min.js');?>"></script>

<script src="<?php echo site_url('assets/js/bloodhound.js');?>"></script>
<script src="<?php echo site_url('assets/js/typeahead.jquery.js');?>"></script>

<script>

/*///////////////////
// bloodhound
//
*/
var stocksData = source_inventory;
var stocks = new Bloodhound({
    datumTokenizer: function (d) { 
        for (var prop in d) { return Bloodhound.tokenizers.whitespace(d.item_code);}        
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    //local:  ["(A)labama","Alaska","Arizona","Arkansas","Arkansas2","Barkansas"]
    limit: 5, //#2 added
    local : stocksData
});
stocks.initialize();

/*///////////////////
// typeahead
//
*/
function apply_typeahead(elm){ alert('tes and yes');
    $(elm).typeahead(null,{ 
        displayKey: function(stocks) {
            for (var prop in stocks) { 
                return stocks.item_code;
            }
        },
        source:stocks.ttAdapter() ,
        updater: function (stocks) {
            return stocks;
        }
    }).on('typeahead:selected', function (obj, datum) {
        var var_datum = [];
        var_datum[0] = datum.item_id;
        dialog_inventory_pull_data(var_datum);
    });
}

//apply_typeahead('input[name^=ast_code].typeahead');



$(document).ready(function(){
    /*
        //some code
    */
});


/*$('.typeahead').on('added',function(){
    apply_typeahead('input[name^=ast_code].typeahead');
    //$('.typeahead').typeahead(typeaheadSettings);
});*/

//JS CUSTOM PAGE

function table_detail_insert(data){     
    if(data){       
        for(var p = 0;p<data.length;p++){
            /*code*/            
        }
        //apply_typeahead($('input[name^=ast_code].typeahead'));
        //apply_typeahead('input[name^=ast_code].typeahead');
        return data;        
    }else{
        console.log('error');   
    }   
}
var url_1 = "/inventory/detail";
function dialog_inventory_pull_data(data_inventory){ 
    var data_inventory_param = $.map(data_inventory, function(value, index) {
        return [value];
    });
    var data_ajax_raw = $.ajax({
        url:ajax_url_1,
        data: {inventory:data_inventory_param},
        dataType: "json",
        success: function(result){
            table_detail_insert(result);            
        }
    }); 
}   

</script>

我尝试从控制台运行apply_typeahead函数，它与初始化的文本框一起使用，但是在动态创建新行之后，再次从控制台运行相同的函数并且所有文本框都没有预先输入。

可能出现什么问题？

由于

Answer 1

问题在于动态添加的输入元素，您需要在创建插件后对其进行初始化。

所以一个解决方案是首先创建一个方法，可以重用它来为一组传递的元素初始化插件，比如

链接：Working on dynamically added input elements with Typeahead

在文本框动态输入后，typeahead无法正常工作

1 个答案: