Question

我有一个coffeescript文件覆盖了rails确认弹出窗口，而是使用bootstrap模式来确认删除操作。

#delete.js.coffee
ready = ->

    $.rails.allowAction = (element) ->
      message = element.data('confirm')
      return true unless message

      $link = element.clone()
        .removeAttr('class')
        .removeAttr('data-confirm')
        .addClass('btn').addClass('btn-danger')
        .html("Delete")

      modal_html = """
                                    <div class="modal fade">
                                      <div class="modal-dialog">
                                        <div class="modal-content">
                                          <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                                            <h4 class="modal-title">#{message}</h4>
                                          </div>
                                          <div class="modal-body">
                                            <p>Be certain, sony.</p>
                                          </div>
                                          <div class="modal-footer">
                                            <a data-dismiss="modal" class="btn">Cancel</a>
                                          </div>
                                        </div>
                                      </div>
                                    </div>  
                   """
      $modal_html = $(modal_html)
      $modal_html.find('.modal-footer').append($link)
      $modal_html.modal()
      return false

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

上面的代码正常工作，除非在模式正确弹出但随后快速关闭时从表中调用它。该表具有可点击的行功能，可链接到节目视图。

#users.js.coffee
ready = ->
  $("tr[data-link]").click ->
    window.location = @dataset.link
    return

  return

$(document).ready ready
$(document).on "page:load", ready

这是表格的主体，其中存在可点击的tr，其中包含用于删除用户的嵌入链接：

    #index.html.erb
    <tbody>
      <% @users.each do |user| %>
        <tr data-link="<%= user_path(user) %>">
          <td><%= user.name %></td>
          <td><%= user.email %></td>
          <td><%= user_status(user) %>
            <% unless current_account.owner == user || user.invitation_accepted? %>
              <%= form_for(User.new, url: user_invitation_path) do |f| %>
                <%= f.hidden_field :email, :value => user.email %>
                <%= f.submit 'Resend Invite', class: 'btn btn-default' %>
              <% end %>  
            <% end %>                     
          </td>
          <td>
            <% unless current_account.owner == user %>
              <%= link_to '', user_path(user), data: {confirm: 'Are you sure you want to delete this user, no take backsies?'}, method: :delete, :class => 'glyphicon glyphicon-remove text-danger' %>
            <% end %>
          </td>
        </tr>
      <% end %>
    </tbody>

这是启用了turbolinks的rails 4应用程序的一部分。

Answer 1

两个点击事件绑定到删除按钮，当它的内部表格。

将点击事件绑定到表格行

时，可以忽略删除按钮

ready = ->
  $("tr[data-link]").not('[data-confirm]').click ->
    window.location = @dataset.link
    return

  return

删除确认消息在Rails应用程序中过早关闭

1 个答案: