【问题标题】:Button in modal not working模态中的按钮不起作用
【发布时间】:2015-03-24 22:52:06
【问题描述】:

我正在尝试创建一个确认您确实要删除用户的模式。除了单击模式中的“#confirm”按钮外,一切似乎都有效。应该提交最初单击的按钮的表单,但它没有发生。 #confirm 的 on('click') 似乎没有被触发,因为我也看不到我的日志消息。

_actions.html.slim

span.member_action.create
  = link_to 'Add New User', new_account_member_path(@account), class: "btn add-user"
#group_member_actions
  span.member_action.reset
    = link_to 'Reset Password', '#', class: 'btn'
  span.member_action.clone
    = link_to 'Clone', '#', class: 'btn'
  span.member_action.delete
    = submit_tag 'Delete', class: 'btn delete-white'

/! Modal Dialog
#confirmDelete.modal.fade aria-hidden="true" aria-labelledby="confirmDeleteLabel" role="dialog"
  .modal-dialog
    .modal-content
      .modal-header
        button.close aria-hidden="true" data-dismiss="modal" type="button"  ×
        h4.modal-title
          | Delete User
      .modal-body
        p
          | Are you sure you want to delete this user?
      .modal-footer
        button.btn.btn-default data-dismiss='modal' type='button' Cancel
        button#confirm.btn.btn-danger type='button' Delete



javascript:
  $('#confirmDelete').on('show', function() {
    $('#confirm').on('click', function(){
      console.log('you clicked confirm');
      $('#delete-member').submit();
    });
  });
  $('.delete-white').on('click', function(e){
    e.preventDefault();
    $('#confirmDelete').data('id', $(this).data('id')).modal('show');
  });

css:
  .modal.in .modal-dialog { margin: 10% auto;} 

index.html.slim

= form_tag remote_destroy_account_members_path(@account), id: 'delete-member', method: :delete do
  = render partial: 'shared/users_title', locals: { hide_user_nav: false }

【问题讨论】:

  • 您确定 on show 事件正在触发吗?
  • 我猜不是。当我单击原始按钮时,我能够看到模式。我刚刚添加的日志消息没有打印到日志中。
  • 您使用的是什么版本的引导程序?可能是一个相关的问题:stackoverflow.com/questions/18568278/…
  • @ArtyomNeustroev bootstrap-sass-3.3.1.0
  • 那么我对$('#confirmDelete').on('show', function() { 中的事件名称可能是正确的。 getbootstrap.com/javascript/#modals-events。查看链接的问题。

标签: javascript jquery twitter-bootstrap ruby-on-rails-4 slim-lang


【解决方案1】:
javascript:
    $('#confirm').on('click', function(){
      console.log('you clicked confirm');
      $('#delete-member').submit();
    });
  $('.delete-white').on('click', function(e){
    e.preventDefault();
    $('#confirmDelete').data('id', $(this).data('id')).modal('show');

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2015-07-04
    • 1970-01-01
    • 1970-01-01
    • 2019-02-02
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多