javascript - 打开另一个页面时，jQuery 脚本无法按预期工作

Question

我正在努力在我目前正在构建的网站中实现 Google Analytics(分析)。我的页面中有一个可打开 PDF 文件的链接，我正在尝试跟踪打开的文件数量。

使用 Chrome 中的 JavaScript 控制台，并且由于警报框打开，我可以确定以下代码有效。

<a id="ga-link" href="path.to.my.file.com">Open PDF file</a>

<script>
(function( $ ) {
    $("#ga-link").on("click", function( event ){
        event.preventDefault();
        gtag('event', 'view', {
        'filetype':'pdf',
        'filename':'file1',
        'event_callback': function() {alert("1");}
        });
    });
})(jQuery);
</script>

但是如果我更换

'event_callback': function() {alert("1");}

与

'event_callback': function() {$(#ga-link).click();}

这就是我真正想做的，脚本没有运行。相反，文件会直接打开(不会将跟踪信息发送到 Analytics)。

我还尝试使用 Google Analytics documentation 中的 javascript 代码:

var btn = document.getElementById('ga-link');
btn.addEventListener('click', function(event) {
    event.preventDefault();
    gtag('event', 'view', {
        'filetype':'pdf',
        'filename':'file1',
        'event_callback': function() {btn.click();}
    });
});

无论我的 'event_callback' 函数是什么，这种直接方法根本不起作用。

在这两种情况下，我都尝试在同一选项卡和新选项卡中打开 PDF，得到相同的结果。

Answer 1

在 Google 示例中，他们使用 form 作为示例。因此，如果您在表单提交按钮上 preventDefault() - 它会阻止提交，但稍后您可以直接提交表单 - form.submit()。在您的情况下，按钮始终会阻止默认设置 - 即使在您的回调函数中也是如此。

有一些方法可以“取消”preventDefault。其中之一可能是:

var btn = document.getElementById('ga-link');

var sendData = function() {
    this.preventDefault();
    gtag('event', 'view', {
        'filetype':'pdf',
        'filename':'file1',
        'event_callback': function() {
           $('#ga-link').unbind('click').click();
           // your code to open url etc.
           btn.addEventListener('click', sendData);
         }
    });
});

btn.addEventListener('click', sendData);