Modalのキャンセルボタンが押された場合に確認したい

Question

実現したいこと

RailsとBootStrapを用いてWebアプリを開発しています。
data-confirm-modalというgemを用いてModalを実装しているのですが、Modalのキャンセルボタンが押された場合にconsole.logで確認したいです。

• Modalのキャンセルボタンが押された場合にconsole.logで確認したい
• CoffeeスクリプトとJQueryで実装したい

前提

以下のようなHTMLでModalは表示されたのですが、キャンセルボタンの取得方法が分かりません。

<div id="confirm-modal-02776012011640993" class="modal false fade show" tabindex="-1" role="dialog" aria-labelledby="confirm-modal-02776012011640993Label" style="z-index: 1051; display: block;">

  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 id="confirm-modal-02776012011640993Label" class="modal-title">ユーザー情報更新の確認</h5>
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
      </div>

     <div class="modal-body">
       <p>ユーザー情報を更新しますか？</p>
     </div>
     <div class="modal-footer">
       <button class="btn cancel btn-default" data-dismiss="modal" aria-hidden="true">キャンセル</button>.    # このキャンセルボタンが押された場合にconsole.logで確認したい
       <button class="btn commit btn-danger" data-dismiss="modal">更新する</button>
     </div>
    </div>
  </div>
</div>

試したこと

以下のCoffeeスクリプトとJQueryでキャンセルボタンを押された場合、console.logを表示するように試したのですが、うまく動いていません。

 $('.modal-dialog').children('modal-content').children('.modal-footer').children('.cancel').on 'click', (e) ->
    console.log("テスト")

CoffeeスクリプトとJQueryの実装方法が間違っていると思うのですが、どのように実装するとModalのキャンセルボタンが押された場合にconsole.logで確認できますか？

何卒、アドバイスなどよろしくお願いいたします。

補足情報（FW/ツールのバージョンなど）

Railsは5.2.8になります。

Answer 1

そろそろdialogを検討してもよいかもしれません

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  btn.addEventListener('click',()=>{
    dlg.returnValue="cancel";
    dlg.showModal();
  });
  dlg.addEventListener('close',()=>{
    console.log(dlg.returnValue);
  });
});
</script>
<input type="button" value="modal open" id="btn">
<dialog id="dlg">
<form method="dialog">
<button type="submit" value="cancel">キャンセル</button>
<button type="submit" value="ok">OK</button>
</form>
</dialog>

Comments

[yasukun252]

ありがとうございます。
私が投稿した上の方法では、できないという事でしょうか？

[yambejp]

$(document).on('click',".modal-dialog .cancel",function(){
console.log('キャンセル');
});

[yasukun252]

ありがとうございます！