ruby-on-rails - rails jQuery 移动应用程序提交表单并获得两次

Question

我正在构建 rails 4 jQuery 移动应用程序，但我发现很多次，而不是全部，表单被提交两次，导致记录的双重插入。无论是开发还是生产。

我试过删除 UJS 和 turbolinks 但没有任何区别。如果我禁用 ajax，除非刷新浏览器，否则我的应用程序不会将 jQuery css 应用于返回的 View 。

我的 javascript 文件没有被调用两次，也没有在 public/assets 中安装任何 Assets 。我没有预编译任何 Assets 。

我想知道这是否可能是在手机上使用鼠标而不是触摸屏的问题？该应用程序虽然只使用 JQM，但也需要在桌面浏览器中可用。

该问题似乎与重复使用相同的 Web 操作有关，例如，将销售项目添加到账单或在单独的 Web 操作中选择菜单项之后的子菜单项。

应用程序.js

//= require jquery
//= require jquery_ujs
//= require clubapp
//= require jquery.mobile
//= require turbolinks

gem 文件

gem 'rails', '4.0.0.rc2'
gem 'jquery-rails'
gem 'jquery_mobile_rails'

Answer 1

可能是您的一些 Javascript 监听器连接了两次。例如，假设您有以下销售项目元素:

<div class="sale-item">
  <!-- inputs -->
  <button class="add">Add Sale Item</button>
</div>

你有一个动态的销售项目列表，你可以通过 javascript 动态地附加这些列表。但是在每次添加时，您都执行以下代码:

// When adding a new sale item:
    $(".sale-item .add").click(function() {
      // ajax request
    });

因此，每当您添加新的销售项目时，都会为 $(".sale-item .add") 创建一个监听器。 ，它实际上包括了页面中的所有提交项。然后发生的事情是:

第一次: Sale Item 1添加，监听器集

第二次: Sale Item 2已添加，为 Sale Item 1 添加了监听器和 Sale Item 2 .所以现在Sale Item 1有两个监听器，会导致重复提交

Here is a demonstration .

确认是否有重复的监听器:

一旦您能够重现错误，请记下触发双重提交的按钮的 ID 或类别。然后在 Chrome/Firefox 控制台/firebug 中，运行:

$("<element that's triggering double-submits>").data("events")
> Object {click: Array[1]}

如果显示 click: Array[1] ，那么你只有一个点击监听，你的代码没有问题。如果显示 click: Array[2]或者更多，然后它是一个代码问题，你不知何故有双重听众。

双听的原因

您有多个事件正在添加相同的监听器(即上述示例)

您有两个使用相同/相似类的不同按钮(例如，一个按钮的类 "btn submit" 和另一个按钮的类只是 "submit" )。因此，您通过说 $(".submit") 添加的监听器现在被添加到两个 "btn submit"和 "submit"纽扣!

找到存在重复项的位置非常困难，您必须通过仔细检查代码来手动完成。