适配jQuery 2.1.3的jQuery Mobile精美弹窗升级至2.2.4后失效

我有一个适配jQuery Mobile的自定义弹窗函数fancyAppAlert，在Cordova应用里用了好几年。最近因为jQuery 2.1.3存在安全漏洞，升级到了兼容jQuery Mobile 1.4.5的最新版本2.2.4，结果弹窗直接失效了。

原代码如下：

function fancyAppAlert(alertContent){
    if ($("#fancyAlertPopup").length === 0) {
        $(':mobile-pagecontainer').pagecontainer('getActivePage').append('<div style="padding-top: 10px; ' +
            'padding-bottom: 20px; padding-left: 20px; padding-right: 20px; width: 86%" data-role="popup" ' +
            'id="fancyAlertPopup" data-theme="a" class="ui-content"><a href="#" data-rel="back" ' +
            'class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">' +
            'Close</a><h4 id="fancyAlertText">' + alertContent + '</h4></div>').trigger("create");
    } else {
        $('#fancyAlertText').html(alertContent);
    }
    $("#fancyAlertPopup").popup( "open",{transition: "flip"} );
}

用jQuery 2.1.3时弹窗能正常显示内容，升级到2.2.4后抛出错误：Uncaught TypeError: Cannot read properties of undefined (reading 'trigger')。我怀疑是.trigger("create")的问题，但没找到2.1.3到2.2.4的破坏性变更文档。因为必须保留jQuery Mobile 1.4.5，没法升级到jQuery 3.x.x，求修复方案。

修复方案 #

核心问题定位 #

报错的根源是$(':mobile-pagecontainer').pagecontainer('getActivePage')在jQuery 2.2.4 + jQuery Mobile 1.4.5的组合下，没有返回可链式调用的jQuery对象（可能返回undefined或原生DOM元素），导致后续的.trigger("create")直接报错。

修复代码 #

把链式调用拆分为单独步骤，先校验活跃页面的存在，再单独对弹窗元素初始化：

function fancyAppAlert(alertContent){
    var $popup = $("#fancyAlertPopup");
    if ($popup.length === 0) {
        // 先获取活跃页面并校验有效性
        var $activePage = $(':mobile-pagecontainer').pagecontainer('getActivePage');
        if ($activePage && $activePage.length) {
            var popupHtml = '<div style="padding-top: 10px; padding-bottom: 20px; padding-left: 20px; padding-right: 20px; width: 86%" data-role="popup" id="fancyAlertPopup" data-theme="a" class="ui-content"><a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a><h4 id="fancyAlertText">' + alertContent + '</h4></div>';
            $activePage.append(popupHtml);
            // 单独对新增的弹窗元素触发create，而非整个页面
            $popup = $("#fancyAlertPopup");
            $popup.trigger("create");
        }
    } else {
        $popup.find('#fancyAlertText').html(alertContent);
    }

    // 确保弹窗已初始化后再打开
    if ($popup.length && !$popup.data("mobile-popup")) {
        $popup.popup();
    }
    $popup.popup("open", {transition: "flip"});
}

关键优化点 #

1. 拆分链式调用：先获取活跃页面并校验，避免直接链式调用导致的未定义错误
2. 精准触发create：只对新添加的弹窗元素触发create，而非整个页面，减少不必要的DOM操作
3. 弹窗初始化校验：打开前检查弹窗是否已初始化，避免重复初始化引发的潜在问题

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