修改 DOM 后提交按钮无响应答案

【问题标题】：Submit button becomes unresponsive after modifying DOM修改 DOM 后提交按钮无响应
【发布时间】：2013-06-14 02:41:55
【问题描述】：

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

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

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

<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 => false 将其删除。这并没有解决问题。

我认为 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-template：缺少子类型。
- 将类型替换为"html/x-handlebars-template"
标签元素的for属性必须引用表单控件。
- 将<label for="nonexistent_field"> 替换为<div class="label>

更新 3

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

【问题讨论】：

我们可以看到表单 html，以及您拥有的任何 javascripts 吗？
虽然您没有提供足够的信息来说明您是如何进行自动完成的，但对我们来说没有多大用处，无响应通常会追溯到 DOM 中被替换的元素，而没有将其事件处理程序分配回它。或者你不小心解除了它的事件处理程序的绑定。或者从表单 HTML 中删除它/在它周围或在您尝试提交的表单中插入另一个表单。
我还发现重复 id 属性值的问题（具有相同 id 的多个元素）可能导致奇怪的 javascript 无响应。

标签： jquery ajax forms autocomplete

【解决方案1】：

在我的 autocomplete_init 方法中，我有 $(document).click(hide_list)，并且方法 hide_list 没有返回任何内容（它也没有阻止默认或停止传播）。我在这个方法中添加了return true，问题就解决了。

【讨论】：