FullCalendar 和 JQuery 事件

Question

我在我的 Laravel 應用程序中制作了 Fullcalendar。 渲染正是我想要的：左側的日歷，當用戶點擊一天時，這一天變成“紅色”，右側創建會議時間列表。

在這里查看結果（我只是模糊了教練的名字；）：

我在日歷中使用此代碼創建列表：

dateClick: function (info) {
            //Colorize the select day in red
            $('*').removeClass('activeday');
            $('[data-date=' + info.dateStr + ']').addClass('activeday');

            // Ajax for recover all events 'Disponible"
            let qlq;
            $.ajax({
                url: 'events/get-disponibility',
                method: 'GET',
                dataType: 'json',
                async: false,
                data: {
                    date: info.dateStr,
                },
                error: function (request, status, error) {
                    console.log(request.responseText);
                    console.log(status);
                    console.log(error);
                },
                success: function (data) {
                    qlq = data;
                }
            });

            let html = "<h3>Horaires et Coachs disponibles : </h3> <br>";
            if (qlq.length) {
                qlq.forEach(function (row) {
                    html = html + '<div class="container d-flex mb-3">\
                    <div class="col-6">\
                    <span id="puce">&#8226;</span>\
                        ' + row.admin_prenom + ' ' + row.admin_nom + ' </div> \
                    <div class="col-6 justify-content-around">\
                        <span class="badge badge-pink">' + row.start_date.substring(11, 16) + '</span>\
                        <a href="#' + row.id + '" class="get-modal-event"\
                         data-idEvent=' + row.id + '>\
                        <span class="badge badge-dark">\
                        <i class="fas fa-arrow-right"></i>\
                        </span>\
                        </a>\
                    </div>\
                </div>';
                });

                $("#freeCoach").empty()
                    .append(html);
            } else {
                $("#freeCoach").empty()
                    .append('<div class="container d-flex mb-3">\
                    <div class="col-12">\
                    <span id="puce">&#8226;</span>\
                        Pas de coach disponible à cette date. <br>\
                        <br>\
                         Seul les dates comportant un fond coloré comporte des disponibilités</div> \
                </div>');
            }
        },

現在我只想彈出一個引導模式，當用戶點擊黑色箭頭（class“get-modal-event”的鏈接）。

所以我在我的日歷渲染之后使用這個 JQuery 代碼：

$('a.get-modal-event').each(() => {
        $(this).click(function (e) {
            e.preventDefault();
            alert('get modal !!!!!');
            $('#modal-event').modal('show');
        })

我創建了一個警告框，以查看 function 工作，但沒有顯示警報，也沒有出現模式......

我試圖在日歷之外創建一個鏈接（使用自己的 class 進行測試）並且警報和模式都出現了！

我也嘗試將此代碼放在不同的文件中並構建它，但結果是一樣的。

任何想法？

Answer 1

您正在使用的click()綁定稱為“直接”綁定，它只會將處理程序附加到已經存在的元素。 它不會綁定到動態創建的元素。 您必須使用 [ on() ] 創建一個“委托”綁定。

在這里你需要使用：

$('body').on('click', 'a.get-modal-event', function(e) {
   e.preventDefault();
   alert('get modal !!!!!');
   $('#modal-event').modal('show');
});