typeahead选择事件(jQuery）的动态绑定

Dynamic binding of typeahead select event (jQuery)

本文关键字：动态绑定 jQuery 选择 事件 typeahead      更新时间：2023-09-26

所以我目前正在创建一个可以动态扩展的表单。表单中每个动态添加的行都包含一个输入字段，该字段使用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']);
  });
}

工作良好。

关于如何解决这个问题有什么想法吗？

所以经过一段时间的尝试，我切换了策略。以下代码完成了任务：

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

您需要在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']);
  }
}
相关文章：