Laravel中FullCalendar动态元素的Bootstrap Modal点击无响应问题

核心问题：动态生成元素的事件绑定失效 #

你遇到的问题很典型——右侧的会议时段列表是通过Ajax请求动态生成的，而你写的事件绑定代码是在页面初始化时执行的，这时候这些a.get-modal-event元素还不存在于DOM中，所以$('a.get-modal-event').each()根本找不到元素，自然绑定不上点击事件。而外部的同类链接是页面加载时就存在的，所以绑定正常。

解决方案：使用事件委托（Event Delegation） #

事件委托的原理是把事件绑定到一个已经存在的父级元素（比如#freeCoach，这个容器是页面加载时就存在的，绑定在这里比绑定到document更高效）上，让它监听子元素的点击事件，不管子元素是何时被添加到DOM中的。

把你原来的这段代码：

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

替换成下面的写法：

// 绑定到列表的父容器#freeCoach，监听子元素的点击
$('#freeCoach').on('click', 'a.get-modal-event', function(e) {
    e.preventDefault();
    alert('get modal !!!!!');
    $('#modal-event').modal('show');
});

如果#freeCoach也是动态生成的，就退而求其次绑定到document：

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

额外优化建议 #

1. 去掉async: false：同步Ajax会阻塞浏览器主线程，导致页面卡顿，建议改成异步模式，把后续的HTML生成逻辑完全放到success回调里，同时用ES6模板字符串替代繁琐的字符串拼接，可读性更强：

$.ajax({
    url: 'events/get-disponibility',
    method: 'GET',
    dataType: 'json',
    data: { date: info.dateStr },
    error: function(request, status, error) {
        console.log(request.responseText, status, error);
    },
    success: function(data) {
        let html = "<h3>Horaires et Coachs disponibles : </h3> <br>";
        if (data.length) {
            data.forEach(function(row) {
                html += `
                    <div class="container d-flex mb-3">
                        <div class="col-6">
                            <span class="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>
                `;
            });
        } else {
            html = `
                <div class="container d-flex mb-3">
                    <div class="col-12">
                        <span class="puce">&#8226;</span> Pas de coach disponible à cette date. <br><br>
                        Seul les dates comportant un fond coloré comporte des disponibilités
                    </div>
                </div>
            `;
        }
        $("#freeCoach").empty().append(html);
    }
});

2. 避免重复ID：你在循环里生成了多个<span id="puce">，ID是全局唯一的，建议改成class（比如class="puce"），避免DOM结构冲突。

内容的提问来源于stack exchange，提问作者Malkom