Question

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

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

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

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

typeahead select事件（jQuery）的动态绑定

2 个答案: