Modalにbuttonをjqueryで書くとイベントが拾えない

Question

Modalにjqueryでボタンを記載しているのですが、そのボタンのクリックイベントが拾えません…
jqueryのhtml()で書いたボタンのクリックイベントは拾えないものなのでしょうか？

件名をクリックすると、
↓
モーダル画面が出ます。

そのモーダル画面にキャンセルボタンをjqueryで表示させているのですが、キャンセルボタンをクリックしても何もイベントが発生しません…

###コード
【モーダルのキャンセルボタンをクリックすると、alertが表示されるようにしているが出てこない】
■html

<!-- /.content -->
    <div class="modal fade" id="modal-lg" style="display: none;" aria-hidden="true">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title">送信メール</h4>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">×</span>
              </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <div class="form-group row">
                            <label class="col-md-3 col-form-label" id="modal_title">送信日時</label>
                            <div class="col-md-6" id="send_date">
                            </div>
                            <div class="col-md-2" id="cancel_btn">
                                <!-- ★キャンセルボタンをjqueryで記載 -->
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="form-group row">
                            <label class="col-md-3 col-form-label">件名</label>
                            <div class="col-md-6" id="send_subject">
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="form-group row">
                            <label class="col-md-3 col-form-label">本文</label>
                            <div class="col-md-6" id="send_body">
                            </div>
                        </div>
                    </div>
                </form>
            </div>
          </div>
          <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
      </div>
    </div>
    <!-- /.content-wrapper -->
        <?php print($layout_footer); ?>
    </div>
<!-- ./wrapper -->

<!-- jQuery -->
    <?php print($layout_jquery); ?>
    <script>
        //件名をクリックした時の処理　★ここのcancel_btnでボタンを表示させている。ボタンはきちんと表示できている。
        jQuery(function($) {
            $(".largeModal").click(function() {
                var mail_id = $(this).data("id");
                var subject = $(this).data("subject");
                var body = $(this).data("body");
                var mail_time = $(this).data("time");
                var status = $(this).data("status");
                
                if(status == 2) { //★ここでキャンセルボタンのhtmlをセットしている。
                    var modal_title = "予約日時";
                    var cancel_btn = `<button type='button' class='btn btn-pill btn-block btn-warning btn-xs modal_cancel' data-id='${mail_id}'>キャンセル</button>`;
                }
                else {
                    var modal_title = "送信日時";
                    var cancel_btn = "";
                }
                
                $("#send_subject").html(subject);
                $("#send_body").html(body);
                $("#send_date").html(mail_time);
                $("#modal_title").html(modal_title);
                $("#cancel_btn").html(cancel_btn); //★ここでキャンセルボタンを表示させている
            }); 
        });
        
        //modalのキャンセルをクリックした時の処理
		jQuery(function($) {
            $(".modal_cancel").click(function() {
                //var id = $(this).data('id'); //mail_idを取得
                alert("キャンセルをクリック");  //★このアラートが出てこない！            
            });
        });
    </script>
</body>
</html>

jqueryでModalのキャンセルボタンを書くと、キャンセルボタンをクリックしてもalertは出てきませんが、htmlに直接キャンセルボタンを書くと、クリックした時にalertが出てきます。。。

【alertが出てくるhtml】
■html

<!-- /.content -->
    <div class="modal fade" id="modal-lg" style="display: none;" aria-hidden="true">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title">送信メール</h4>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">×</span>
              </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <div class="form-group row">
                            <label class="col-md-3 col-form-label" id="modal_title">送信日時</label>
                            <div class="col-md-6" id="send_date">
                            </div>
                            <div class="col-md-2" id="cancel_btn">
                                <button type="button" class="btn btn-pill btn-block btn-warning btn-xs modal_cancel">キャンセル</button>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="form-group row">
                            <label class="col-md-3 col-form-label">件名</label>
                            <div class="col-md-6" id="send_subject">
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="form-group row">
                            <label class="col-md-3 col-form-label">本文</label>
                            <div class="col-md-6" id="send_body">
                            </div>
                        </div>
                    </div>
                </form>
            </div>
          </div>
          <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
      </div>
    </div>
    <!-- /.content-wrapper -->
        <?php print($layout_footer); ?>
    </div>
<!-- ./wrapper -->

<!-- jQuery -->
    <?php print($layout_jquery); ?>
    <script>
        //件名をクリックした時の処理
        jQuery(function($) {
            $(".largeModal").click(function() {
                var mail_id = $(this).data("id");
                var subject = $(this).data("subject");
                var body = $(this).data("body");
                var mail_time = $(this).data("time");
                var status = $(this).data("status");
                
                if(status == 2) {
                    var modal_title = "予約日時";
                    var cancel_btn = `<button type='button' class='btn btn-pill btn-block btn-warning btn-xs modal_cancel' data-id='${mail_id}'>キャンセル</button>`;
                }
                else {
                    var modal_title = "送信日時";
                    var cancel_btn = "";
                }
                
                $("#send_subject").html(subject);
                $("#send_body").html(body);
                $("#send_date").html(mail_time);
                $("#modal_title").html(modal_title);
                //$("#cancel_btn").html(cancel_btn); ★コメントアウト！
            }); 
        });
        
        //modalのキャンセルをクリックした時の処理
		jQuery(function($) {
            $(".modal_cancel").click(function() {
                //var id = $(this).data('id'); //mail_idを取得
                alert("キャンセルをクリック");  //★出てくる          
            });
        });
    </script>
</body>
</html>

アドバイスいただけますと幸いです。
よろしくお願いいたします。

Answer 1

下記の部分ですが

$(".modal_cancel").click(function() {

JavaScriptなどで後から追加した要素にクリックイベントを追加するには以下のように書く必要があります。

$(document).on('click', '.modal_cancel', function() {

Comments

[mikeko0901]

後から追加した要素のイベントは書き方が変わることを知りませんでした！ありがとうございます！