Question

我正在实现一个允许用户生成项目列表的表单。这些项目对应一个模型，我已经为该模型实现了自动完成功能。

我在相应的控制器中创建了一个自动完成方法，该方法获取当前字段中的文本并返回可能项目的数组。

如果用户输入字符串“ba”，则可能会在DOM中添加以下div：

<div class='list'>
  <div class='autocomplete_item' data-title='Banana' data-object-id='3'>
    <span class='match'>Ba</span>nana
  </div>
</div>

项目“添加”后，会在表单中添加一对隐藏字段：

<input type='hidden' id='item_1_id' name='item[1][id]' value='5' />
<input type='hidden' id='item_1_title' name='item[1][title]' value='Banana' />

问题：

一旦将自动完成div添加到DOM，表单的提交按钮就会变得无法响应。点击它触发，没有事件，不发送请求，并且在我知道的任何控制台中都不会导致JavaScript错误。

尝试过的解决方案和误解：

我认为表单的authentication_token存在某种问题，因此我使用以下命令将其删除：authentication_token =＆gt;假。这并没有解决问题。

我想也许rails表格需要id。在所有新隐藏字段中添加ID都没有任何效果。

我认为附加的div可能缺少</div>或其他东西，这会导致整个DOM变得无效。我已经证实情况并非如此。

我认为在初始加载后向表单添加隐藏字段存在一些固有的错误，特别是考虑到身份验证令牌。但是，问题发生在添加任何表格之前。只需将自动完成列表div添加到DOM就会破坏表单。

可能的解决方案：

如果我找不到坚持使用传统形式助手的解决方案。表单，我想我可以完全抛弃表单元素并执行jQuery帖子并根据响应从客户端重定向。但我很好奇这里出了什么问题，这个解决方案看起来很糟糕。

如果有人能就这个问题提供任何见解，我真的很感激！谢谢:)）

更新1

作为一个新的开发项目，我开始厌倦了这个过程，并找到了导致失败的代码行（其中一个？）。请参阅下面的相关咖啡：

init_autocomplete = () ->

  $('.autocomplete')
    .keydown(handle_keydown)
    .keyup(handle_keyup)
    .click(handle_click)

  $(document).on('click', '.autocomplete_item', null, select_item)
  $(document).click(hide_list)

handle_click = () ->

  ### *** if I insert 'return' here, the form submit button still works.

  autocomplete_wrapper = $(this).parent()

  ### *** if I insert 'return' here, the form submit button fails.

  unless autocomplete_wrapper.data('object-id')

    autocomplete($(this))

显然，有关访问输入字段的父级的问题导致了问题。这很不幸，因为我依靠父div来定位自动完成菜单。

更新2

我运行了w3c验证器并修复了以下错误，但问题仍然存在（我应该在我的错误修复核对清单中提出这个问题）：

错误值x-handlebars-元素脚本上属性类型的模板：缺少子类型。
- 用"html/x-handlebars-template"
label元素的for属性必须引用表单控件。
- 将<label for="nonexistent_field">替换为<div class="label>

更新3

我已通过将{HAML中的= f.submit替换为%input.submit_form{:type => 'button', :value => 'Create Lesson', :onclick => '$(this).parent().submit()'}来实施解决方案。我仍然不确定普通按钮有什么问题，但我需要继续这个问题。感谢大家的建议。

Answer 1

在我的autocomplete_init方法中，我有$(document).click(hide_list)，方法hide_list没有返回任何内容（也没有阻止默认或停止传播）。我在此方法中添加了return true，问题已修复。

修改DOM后，“提交”按钮无响应

1 个答案: