无限滚动动态加载的博文无法触发Modal弹窗问题如何解决

问题根因 #

你遇到的是典型的动态元素事件绑定失效问题：你写的$('.openPopup').on('click', ...)逻辑只会在页面首次加载完成后，给当时已经存在于DOM里的.openPopup元素绑定点击事件，后续无限滚动动态插入的新博文中的触发按钮，不会被自动绑定事件，所以点击没有响应。

解决方案（二选一即可，推荐第一种） #

方案1：使用事件委托（无需修改无限滚动逻辑）

把事件绑定到永远不会被动态删除的父级元素（比如页面根document或者你的.infinite-container容器）上，利用事件冒泡机制触发回调，后续新增的所有对应元素都会自动生效，不需要重复绑定。
直接替换你的Modal弹窗JS代码即可：

$(document).ready(function(){
    // 把事件委托给document，匹配所有.openPopup元素，包括后续新增的
    $(document).on('click', '.openPopup', function(){
        var dataURL = $(this).attr('data-href');
        $('.modal-body').load(dataURL,function(){
            $('#myModal').modal({show:true});
        });
    }); 
});

方案2：在无限滚动加载完成后重新绑定事件

每次新的博文内容加载完成后，手动给新的触发按钮绑定事件。需要修改你的无限滚动JS代码：

// 先把弹窗绑定逻辑封装成公共函数
function bindModalTrigger() {
    // 先off解绑避免重复绑定事件
    $('.openPopup').off('click').on('click',function(){
        var dataURL = $(this).attr('data-href');
        $('.modal-body').load(dataURL,function(){
            $('#myModal').modal({show:true});
        });
    });
}

$(document).ready(function(){
    // 页面初始加载时先绑定一次
    bindModalTrigger();
    
    var infinite = new Waypoint.Infinite({
        element: $('.infinite-container')[0],
        bufferPx : 1000,
        offset: 'bottom-in-view',
        history: 'push',
        path: '.pagination__next',
        onBeforePageLoad: function () {
            $('.loading').show();
        },
        onAfterPageLoad: function () {
            $('.loading').hide();
            // 新内容加载完成后重新绑定事件
            bindModalTrigger();
        },
    });
})

额外优化建议 #

你当前的HTML代码有个隐性bug：每个博文的循环里都写了id为myModal的弹窗，DOM规范要求id必须全局唯一，否则不管你点哪个博文的触发按钮，永远只会打开第一个id为myModal的弹窗。
可以修改为动态唯一id解决：

1. 弹窗id改为id="myModal-{{ post.pk }}"
2. 触发a标签新增属性data-target-modal="myModal-{{ post.pk }}"
3. 对应JS修改为匹配动态id即可：

$(document).on('click', '.openPopup', function(){
    const dataURL = $(this).attr('data-href');
    const targetModalId = $(this).data('target-modal');
    const $targetModal = $('#' + targetModalId);
    $targetModal.find('.modal-body').load(dataURL,function(){
        $targetModal.modal('show');
    });
});

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