Question

我可以在静态表单上加载Twitter typeahead。但是，在这种情况下，我想将它应用于动态生成的字段。即使我的复制脚本添加了所需的＆＃34; .typeahead＆＃34;对新输入的类，它似乎永远不会起作用。实际上，静态表单由几个附加类包围，这些类不是为动态字段生成的。

我觉得为了让动态字段像静态字段一样运行，我还需要做些什么，但我不确定。

Javascript：

<!-- Dataset: First Names -->
var firstnames = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    limit: 5,
    prefetch: {
        url: './datasets/firstnames.json',
        filter: function(list) {
            return $.map(list, function(firstname) { return { name: firstname }; });
        }
    }
});

firstnames.initialize();

$('.typeahead').typeahead(null, {
    name: 'firstnames',
    displayKey: 'name',
    source: firstnames.ttAdapter()
});
<!-- Dataset: First Names (End) -->

<!-- Dynamic Fields -->
var count=2;
$("#add").click(function(){
    var html="<div id='div"+count+"'><input id='firstname"+count+"' type='text' class='typeahead' placeholder='Additional First Name'></input><button type='button' onclick=remover('"+count+"')>Remove</button></div>";
$("#additionalnames").append(html);

    count++;
});

function remover(which){
  $("#div"+which).remove();
}
<!-- Dynamic Fields End -->

HTML：

<p>Standard field works fine (type a letter from a to g):</p>
<input type="text" id="firstname" name="firstname" class="typeahead" placeholder="First Name">
<br /><br /><br /><br /><br /><br />
<p>Dynamic field does not:</p>
<div id="additionalnames"></div>
<button id="add" type="button">Add Another</button>

我不认为JSFiddle可以处理我的json文件，所以实时实现在这里： http://drjoeseriani.com/firstnames

此处的可下载版本位于： http://drjoeseriani.com/firstnames.zip

感谢您的帮助。

Answer 1

使用javascript创建元素而不是附加原始标记可能很有用。为什么？

因为如果你使用javascript（或jQuery）创建一个元素，你可以附加一个事件/插件，在这种情况下它可以是一个预先插件。

喜欢这个

var input = $('<input>').attr('id', 'firstname' + count).addClass('typeahead').prop('placeholder', 'Additional First Name');

现在你有了一个输入元素，你可以将.typehead({ ... })附加到它。

所以你的点击事件应该是这样的。

$("#add").click(function() {
  // creating a new <div id=count></div>
  var div = $('<div>').attr('id', count);

  // creating a new <input id=count class="typeahead" placeholder=".."></input> 
  var input = $('<input>').attr('id', 'firstname' + count)
    .addClass('typeahead')
    .prop('placeholder', 'Additional First Name');

  // creating a new <button>Remove</button> (with a click event)
  var button = $('<button>').text('Remove')
    .on('click', function() {
      $(this).closest('div').remove();
    });

  div.append(input); // appending the input to the div
  div.append(button); // appending the button to div

  // attaching typeahead to the newly creating input
  input.typeahead(null, {
    name: 'firstnames',
    displayKey: 'name',
    source: firstnames.ttAdapter()
  });

  // appending our newly creating div with all the element inside to #additionalnames
  $("#additionalnames").append(div);

  // incrementing count
  count++;
});

另外，我改变了自由地将remover脚本全部移除。您可以将单击事件附加到按钮并查找父div并使用.closest()

将其删除

希望这有帮助。

如何将typeahead.js（Bloodhound）添加到jQuery动态创建的字段？

1 个答案: