Question

我有一个超级标准错误框，当提交无效时弹出，然后用户可以关闭此框。换句话说就是......

HTML

<!-- Errors box -->
<div class="container alerts-container" id="order-errors" style="display:none;">
  <div class="row">
    <div class="col-xs-10 col-xs-offset-1">
      <p><strong>Sorry about that, the order didn't go through because of the following reasons:</strong></p>
    </div>
    <div class="col-xs-1 remove-col" >
      <span class="glyphicon glyphicon-remove"></span>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-10 col-xs-offset-1 labeler">
      <ul>
        <% if @order.errors.any? %>
          <% @order.errors.full_messages.each do |message| %>
            <li><%= message %></li>
          <% end %> 
        <% end %>
        <% if flash[:danger].present? %>
          <li><%= flash[:danger] %></li>
        <% end %>
      </ul>
    </div>
  </div>
</div>

渲染：

<div class="container alerts-container" id="order-errors" style="display: block;">
  <div class="row">
    <div class="col-xs-10 col-xs-offset-1">
      <p><strong>Sorry about that, the order didn't go through because of the following reasons:</strong></p>
    </div>
    <div class="col-xs-1 remove-col">
      <span class="glyphicon glyphicon-remove"></span>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-10 col-xs-offset-1 labeler">
      <ul><li>Rental end date has to be on or after rental start date</li></ul>
    </div>
  </div>
</div>

Jquery的：

// Close errors box
$(document).on("click", "#order-errors .glyphicon-remove", function(e) {
  $('#order-errors').slideUp()
})

在MacBook上的Safari / Chrome / Firefox上，或在PC上的Chrome / Firefox上，以及在Android上的Chrome / Firefox上，它都能正常工作。但是在任何Apple移动设备上的Safari / Chrome上它都不起作用。有什么想法吗？请注意，在MacBook上的Safari模拟器上，它也可以正常工作。

测试代码：

1. Go to https://hidden-tundra-8656.herokuapp.com/orders
2. Hit the Cart button at top left
3. Order errors will pop up in orange
4. Try to "x" out of the order errors box, it will/ will not work per above

Jquery代码不适用于Apple移动设备（Safari和Chrome）

0 个答案: