用bootstrap在做项目时遇到一个问题,bootstrap中有输入自动提示的这样一个组件,这个组件在通过jquery进行克隆复制的时候遇到了一些问题,无论克隆的时候原始输入框是否已经填写了数据,在克隆完后,只要原始输入框填写了数据,新的输入框(克隆出来的)都无法重新从source里获取所有的信息,只能按照原始选定的数据获取。
后来,经过多次试验,解决了这个问题,主要思路是这样的:
1、不用jquery的clone(true)方法克隆,直接用jquery在网页中写出完整html代码。(我项目中用after()方法)例如如下代码:
$("table").on("click","a.zengjia",function(i){
$(this).parent().parent().after("这里写入包含自动输入提示框的html完整代码结构");
});
html中要包含typeahead结构,例如:<input placeholder='输入关键词并点选' class='typeahead' type='text' data-provide='typeahead' autocomplete='off'/>
2、让新的typeahead提示框在获得焦点时绑定事件。例如如下代码:
$('table').on("focus","input.typeahead",function(){
$(this).typeahead({ source:subjects });
});
subjects对象可以在js脚本中获取,这里我的模板用的是smarty:
var subjects = [{foreach $data as $v=>$k}'{$k.title}',{/foreach}''];