Elementor弹窗模态框内链接点击无响应问题求助

问题情况 #

• 借助Elementor弹窗功能+动态功能制作汉堡菜单，点击汉堡按钮可正常触发弹窗显示
• 弹窗内的链接点击无任何响应，控制台无报错信息
• 相同jQuery代码绑定页面其他静态元素（如entry-title）时，点击可正常触发逻辑，说明代码本身无语法错误

原代码示例 #

jQuery(document).ready(function($) {
    console.log('Here it works');
    // Navigation menu
    jQuery('.onepage h4.elementor-heading-title.elementor-size-default > a').click(function(event) {
        console.log("here doesn't work");        
        event.preventDefault();
        var hash = this.hash;

        if (window.location.pathname === '/') {
            jQuery('html, body').animate({
                scrollTop: jQuery(hash).offset().top
            }, 800, function() {
                window.location.hash = hash;
            });
        } else {
            var targetUrl = window.location.origin + '/#' + this.hash.substr(1);
            window.location.href = targetUrl;
            return;
        }
        jQuery('.elementor-popup-modal').css('display', 'none');
    });
});

核心原因与解决方案 #

1. 动态元素的事件绑定问题 #

Elementor弹窗属于动态生成的DOM元素，页面初始化时（document.ready）弹窗元素尚未加载完成，直接绑定点击事件会失效。需改用事件委托方式绑定事件，让事件监听绑定到已存在的父元素（如document）上，确保动态生成的元素能触发事件。

2. 修改后的代码 #

jQuery(document).ready(function($) {
    console.log('Navigation script loaded');
    // 事件委托绑定弹窗内的导航链接
    $(document).on('click', '.onepage h4.elementor-heading-title.elementor-size-default > a', function(event) {
        console.log('Link clicked');        
        event.preventDefault();
        var hash = this.hash;

        if (window.location.pathname === '/') {
            $('html, body').animate({
                scrollTop: $(hash).offset().top
            }, 800, function() {
                window.location.hash = hash;
            });
        } else {
            var targetUrl = window.location.origin + '/#' + hash.substr(1);
            window.location.href = targetUrl;
        }
        // 关闭弹窗
        $('.elementor-popup-modal').hide();
    });
});

3. 额外排查点 #

• 检查CSS属性：确认弹窗或链接元素是否设置了pointer-events: none，若存在需移除，或给链接单独设置pointer-events: auto
• Elementor弹窗设置：查看弹窗是否开启了全局点击关闭逻辑（如点击弹窗任意区域关闭），可能存在事件冒泡阻止了链接的点击事件，需调整弹窗的关闭触发范围
• 选择器验证：在控制台执行$('.onepage h4.elementor-heading-title.elementor-size-default > a')，确认能正确选中弹窗内的链接，避免选择器错误

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