预先输入选择事件的动态绑定（jQuery）

Question

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

我正在尝试将 typeahead:selected 绑定到每个新行对应的输入字段。该事件返回数据库中的建议名称及其对应的 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

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

$('.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']);
    })
});

Answer 2

您需要在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']);
  });
}

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

另外在我看来你应该使用类而不是从计数器变量和它的 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']);
  }
}