在Rails的确认对话框中单击“取消”时触发“单击”事件

Question

I am using this gem ( https://github.com/bluerail/twitter-bootstrap-rails-confirm ) to replace the standard browser confirmation dialogue box with a bootstrap modal, and it is working, however, there are no built-in callbacks for when the 'Confirm' or 'Cancel' buttons or selected, so I am trying to create my own.

I am currently disabling the original link when it is clicked to prevent the user from clicking it twice, however, if 'Cancel' is clicked on the confirmation dialogue box, the link needs to be re-enabled. This is what I tried:

$('#confirmation_dialog').find('.cancel').on 'click', (e) ->
    console.log('cancel was clicked')
    $('.disabled').removeClass('disabled')

The issue is that this is not run when the 'Cancel' button/link is clicked.

When using the Chrome JS console, I have no problem finding the correct 'Cancel' button on the modal, and calling it using

$('#confirmation_dialog').find('.cancel').click()

which effectively cancels and closes the modal, however, my on click event is not triggered, so the button is not re-enabled.

This is the link that is on the page for the user to click:

<td><%= link_to 'Cancel Appt', cancel_appointment_path(appointment), class: 'btn btn-default btn-xs btn-danger btn-disable-after-click', data: { confirm: "Are you sure you want to cancel the appointment?", commit: 'Yes', cancel: 'No' } %></td>

and this disables the button so it cannot be clicked twice by the user:

$('.btn-disable-after-click').on 'click', (e) ->
    $(this).addClass('disabled')

Any suggestions on what I'm doing wrong would be much appreciated, thanks!

Answer 1

Is it because the element (eg $('#confirmation_dialog').find('.cancel') ) doesn't exist at the point you're binding to it?

You can use jQuery's on method to bind to the event dynamically by specifying the selector, like so:

$('body').on 'click', '#confirmation_dialog .cancel', (ev) ->
    $('.disabled').removeClass('disabled')

This seems like a possible cause since dialogs are normally added to the page using JavaScript so don't exist in the DOM initially. Without seeing the full source though it's difficult to be sure.