FullCalendar 和 JQuery 事件

Question

我在我的 Laravel 应用程序中制作了一个完整日历。渲染正是我想要的：左侧的日历，当用户点击某一天时，这一天变为 "red"，右侧创建会议时间列表。

在这里查看结果（我刚刚模糊了教练的名字；）：

我在我的日历中使用此代码创建列表：

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>');
            }
        },

现在我只想弹出一个 bootstrap 模式，当用户点击黑色箭头时（link 和 class "get-modal-event"）。

所以我在我的日历渲染之后使用这个 JQuery 代码：

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

我已经创建了一个警告框来查看该功能是否正常工作，但是没有显示任何警告，也没有出现任何模式...

我试图在日历之外创建一个 link（有自己的 class 用于测试）并且警报和模态都出现了！

我也试过将这段代码放在不同的文件中并构建它，但结果是一样的。

有什么想法吗？

Answer 1

您正在使用的 click() 绑定称为 "direct" 绑定，它只会将处理程序附加到 已经存在 的元素。它不会绑定动态创建的元素。您必须使用 [on()].

创建一个 "delegated" 绑定

这里你需要使用：

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

FullCalendar 和 JQuery 事件

FullCalendar and JQuery events

javascript

jquery

laravel

fullcalendar-4