typeahead select 事件的动态绑定 (jQuery)

Question

所以我目前正在创建一个可以动态扩展的表单。表单中每个动态添加的行都包含一个输入字段，该字段使用 jQuery typeahead 插件显示建议。

我正在尝试将 typeahead:selected 甚至绑定到每个新行对应的输入字段。事件 returns 建议名称及其在数据库中的相应 ID。

function initIdStorageBinding(){
  stringField = '#INPUT_FIELD'+counter;
  idField = '#INPUT_FIELD_ID'+counter;

  $(stringField).bind('typeahead:selected', function(obj, data, name) {
      $(idField).val(data['id']);
      $(stringField).val(data['name']);
  }
}

只要将 now 行附加到表单，其中 counter 是当前行的索引，就会调用此函数。

问题：绑定总是将值插入添加到表单的最后一个输入字段，而不是当前选择的字段。

添加非动态绑定，例如：

function doBindings(){
  $('#INPUT_FIELD1').bind('typeahead:selected', function(obj, data, name) {
      $('#INPUT_FIELD_ID1').val(data['id']);
      $('#INPUT_FIELD1').val(data['name']);
  });

  $('#INPUT_FIELD2').bind('typeahead:selected', function(obj, data, name) {
      $('#INPUT_FIELD_ID2').val(data['id']);
      $('#INPUT_FIELD2').val(data['name']);
  });
}

工作正常。

有什么解决办法吗？

Answer 1

您需要在 initIdStorageBinding 函数中传递 counter 变量，例如，

function initIdStorageBinding(counter) { // pass counter here
  stringField = '#INPUT_FIELD'+counter;
  idField = '#INPUT_FIELD_ID'+counter;

  $(stringField).bind('typeahead:selected', function(obj, data, name) {
      $(idField).val(data['id']);
      $(stringField).val(data['name']);
  });
}

或者使您的计数器变量成为全局变量，以便可以从任何函数内部访问它。

我还认为你应该使用 class 而不是绑定计数器变量中的每个元素及其 id，如

function initIdStorageBinding(){
  stringField = '.your-string-class';
  idField = '.other-field-class';

  $(stringField).bind('typeahead:selected', function(obj, data, name) {
      $(idField).val(data['id']);
      $(stringField).val(data['name']);
  }
}

Answer 2

所以在尝试了一段时间之后，我改变了策略。以下代码段完成了工作：

$('.CLASS_OF_INPUT_FIELDS').each(function(index,element){
    $(element).bind('typeahead:selected', function(obj, data, name) {
        $(element).next('.CLASS_OF_HIDDEN_ID_FIELD').val(data['id']);
        $(element).val(data['name']);
    })
});

typeahead select 事件的动态绑定 (jQuery)

Dynamic binding of typeahead select event (jQuery)

javascript

jquery

bind

selected

typeahead.js