IE中的Bootstrap 3下拉和Rails UJS冲突

Question

我有一个注册表单，它使用remote: true 提交并捕获ajax:error 以显示验证。在 IE8 中，此功能在注册页面上很好，但是当从 BS3 下拉列表中使用相同的表单时，它只是在提交时遵循 href 而不使用 AJAX。

我有一个<a> 标记，它使用remote: true 从下拉列表中发送AJAX 请求，它在IE8 中运行良好。问题似乎只出现在从下拉列表提交的表单中。

这是一个晦涩难懂的问题，但如果有人能提供帮助，我想它会帮助我更好地理解绑定 JS 事件。我添加了下拉代码和相关的JS。

来自注册页面。

<div class="dropdown">
  <a href="/signup?locale=en" data-target="#" class="dropdown-toggle" data-toggle="dropdown">Sign Up</a>
  <div class="dropdown-menu signup-dropdown pull-right">

    <div id="signup-form-container">

    <form accept-charset="UTF-8" action="/signup?locale=en" class="new_user" data-remote="true" data-type="json" id="signup-form" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="lQcG6WXJO/mcQ/tly+mb+kcEpzY39hdCWhMQkB1VEqA=" /></div>

      ... #fields

      <input class="btn btn-default" name="commit" type="submit" value="Sign Up" />

    </form>
    </div>
  </div>
</div>

users.js

var usersReady = function() {
  var displaySignupResult = function(event, data, status, xhr) {
    //do login stuff
  };

  var signupError = function(event, xhr, status, error){
    //show errors
  };

  $(document).on('ajax:success', '#signup-form', displaySignupResult)
             .on('ajax:error'  , '#signup-form', signupError);
};

$(document).ready(usersReady);
$(document).on('page:load', usersReady);

Answer 1

您的问题是关于 js 冲突。 可以通过列出这种格式的js文件来解决。

在你的布局中

<%= javascript_include_tag "application" %>

在 application.js 中

//= require jquery
//= require jquery_ujs
//= require purecss-dropdown
//= require_tree .

或试试这个。（但这不是一个好习惯）

config.assets.precompile += ['admin1.js', 'admin2.js', 'admin3.js']

希望这会有所帮助。