点击事件函数仅在第二次点击时触发的问题排查

嗨，我来帮你排查这个“点击事件仅第二次触发”的问题～

核心原因 #

你的代码里犯了一个常见的逻辑错误：第一次点击按钮时，你才给这个按钮绑定fancybox的弹窗功能，而不是提前完成绑定。所以第一次点击只是执行了“绑定fancybox”这个操作，并没有触发弹窗；第二次点击时，fancybox已经绑定完成，才会正常弹出窗口。

修正方案 #

这里提供两种可行的修正方式，你可以根据需求选择：

方式一：提前初始化fancybox，点击时动态修改参数并触发

这种方式适合需要复用弹窗配置的场景：

$(function () {
    // 提前给按钮初始化fancybox，配置好固定参数
    $("#back-in-stock-subscribe").fancybox({
        'transitionIn': 'none' // 注意你原代码里的'non...'是拼写错误，这里修正为合法值
    });

    // 点击事件中仅动态更新href并触发弹窗
    $("#back-in-stock-subscribe").click(function (e) {
        // 阻止默认点击行为，避免意外跳转
        e.preventDefault();
        
        var sku = document.getElementById('back-in-stock-sku-to-get').textContent;
        var action = '@Url.RouteUrl("BackInStockSubscribePopup", new { productSku = "sku" })';
        action = action.replace("sku", sku);
        
        // 修改弹窗的目标地址并打开
        $(this).fancybox('open', { href: action });
    });
});

方式二：点击时直接调用弹窗（无需提前绑定）

如果不需要复用弹窗配置，也可以直接在点击事件中调用$.fancybox.open来创建弹窗：

$(function () {
    $("#back-in-stock-subscribe").click(function (e) {
        e.preventDefault();
        
        var sku = document.getElementById('back-in-stock-sku-to-get').textContent;
        var action = '@Url.RouteUrl("BackInStockSubscribePopup", new { productSku = "sku" })';
        action = action.replace("sku", sku);
        
        // 直接打开弹窗，传入完整配置
        $.fancybox.open({
            href: action,
            transitionIn: 'none'
        });
    });
});

额外注意点 #

你原代码中的'transitionIn': 'non...'明显是拼写错误，建议修正为fancybox支持的过渡效果值，比如'none'、'fade'或'elastic'，否则可能导致弹窗显示异常。

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