二维码下载按钮无法触发AJAX请求，求原因与修复方案

问题描述 #

开发了带二维码生成器的表单，二维码以SVG格式生成，下方会动态创建下载按钮。点击该按钮本应触发AJAX请求downloadQrCode.php脚本，但实际无任何响应，浏览器开发者工具网络面板未显示任何请求，PHP脚本中的调试代码也未执行。

原因分析 #

核心问题是事件绑定时机错误：

• 下载按钮是在generateQrCode()的AJAX回调函数中动态插入到DOM中的
• 页面加载时执行的$('#pm_publish_content_form_dl_button').on('click', ...)代码，此时目标按钮还不存在，导致事件绑定失败，点击按钮自然不会触发任何逻辑

修复方案 #

有两种可行的修复方式，选其中一种即可：

方式1：使用事件委托绑定到父元素 #

将点击事件绑定到页面加载时已存在的父元素（比如body或更接近的容器），利用事件冒泡机制捕获动态元素的点击事件：

修改showLinkGenerator.html.php中的下载事件绑定代码：

// 使用事件委托绑定到body（或更合适的父容器）
$('body').on('click', '#pm_publish_content_form_dl_button', function () {
    $.post(
        '<?= $view[\'cms_file\']->resourceUrl(\'cms/php/contentpublisher/ajax/admin/downloadQrCode.php\') ?>',
        {},
        function (data) {
            let blob = new Blob([data], {type: 'application/eps'});
            window.location = URL.createObjectURL(blob);
        }
    )
});

方式2：动态创建按钮后直接绑定事件 #

在generateQrCode()的AJAX回调中，创建按钮后立即为其绑定点击事件：

修改showLinkGenerator.html.php中的generateQrCode函数：

function generateQrCode() {
    $.post(
        '<?= $view[\'cms_file\']->resourceUrl(\'cms/php/contentpublisher/ajax/admin/generateQrCode.php\') ?>',
        {
            url: $siteUrl.val(),
            qrCodeType: $('#pm_publish_content_form_ct_qrcode_dropdown').val()
        },
        function (data) {
            $('#pm_publish_content_form_ct_qrcode_dropdown_container').after(data);
            // 创建按钮元素
            const $buttonContainer = $(`
                <div id="pm_publish_content_form_dl_button_container" class="dl-button-container">
                    <button type="button" id="pm_publish_content_form_dl_button" 
                            name="pm_publish_content_form[dl_button]" class="btn btn-form" 
                            style="position: absolute; bottom: 0; margin-left: 5px;">
                        ${trans('link_generation.download', {}, 'contentpublisher_admin')}
                    </button>
                </div>
            `);
            // 为按钮绑定点击事件
            $buttonContainer.find('#pm_publish_content_form_dl_button').on('click', function () {
                $.post(
                    '<?= $view[\'cms_file\']->resourceUrl(\'cms/php/contentpublisher/ajax/admin/downloadQrCode.php\') ?>',
                    {},
                    function (data) {
                        let blob = new Blob([data], {type: 'application/eps'});
                        window.location = URL.createObjectURL(blob);
                    }
                )
            });
            // 将容器插入DOM
            $buttonContainer.insertAfter($('.qrcode'));
        }
    );
}

额外注意点 #

1. 检查downloadQrCode.php中的文件路径__DIR__ . '/qrcode.eps'是否正确，确保文件存在且有读取权限
2. 下载逻辑中使用window.location = URL.createObjectURL(blob)可能存在兼容性问题，可替换为创建临时a标签触发下载：

function (data) {
    let blob = new Blob([data], {type: 'application/eps'});
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'qrcode.eps';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url); // 释放资源
}

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