Question

我使用的是jQuery 1.11.1和jQuery Mobile 1.4.5，一切正常。最近，我已经将jQuery升级到3.3.1。我遇到弹出式问题。当我尝试通过调用popupCaptureOptions（）函数打开onlick按钮中的弹出窗口时，出现错误提示。

Uncaught TypeError: e.preventDefault is not a function
    at w.Event.preventDefault (jquery-3.3.1.min.js:2)
    at w.Event.preventDefault (jquery-3.3.1.min.js:2)
    at jquery.mobile-1.4.5.min.js:7
    at i (jquery-3.3.1.min.js:2)
    at dispatch (jquery-3.3.1.min.js:2)
    at y.handle (jquery-3.3.1.min.js:2)
    at Object.trigger (jquery-3.3.1.min.js:2)
    at jquery-3.3.1.min.js:2
    at Function.each (jquery-3.3.1.min.js:2)
    at jQuery.fn.init.each (jquery-3.3.1.min.js:2)

我的html页面如下所示。

 <div data-role="page" id="previewscreen">
        <main>
            <div data-role="main" class="ui-content" style="margin:0; padding:0;">
                <div id="ID_IMAGE_DIV" class="ID_IMAGE_DIV">
                </div>
            </div>
        </main>
        <div data-role="popup" data-history="false" data-overlay-theme="a" data-position-to="window" id="imagePopup">
            <a class="popup_refrence" href="#" data-rel="back"></a>
            <img id="popupImage" />
        </div>
        <div data-role="popup" data-dismissible="false" data-position-to="window" class="ui-content" id="ID_EXTRACTIONERRORPOPUP">
            <a href="#" id="cancel" class="ui-btn ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
            <p class='error'>Extraction Failed.</p>
            <div id="ID_MORETEXT"></div>
            <a id="ID_MORE" href="#">Read more</a>
            <p id="extractionfailed"></p>
        </div>
        <div data-role="popup" id="capture_popupalert" data-dismissible="false" data-position-to="window" class="ui-content" data-overlay-theme="b">
            <h4 style="text-align:center; margin-top:10px">Capture Options</h4>
            <hr style=" margin-top: 0;" />
            <div id="back_capture" style="margin-top:5%">
                <div class="ui-grid-a">
                    <a style="background-color:#00b3b3;color:white;margin-left:30px;margin-right:30px;" id="back_capture_button" class="ui-btn ui-corner-all ui-shadow">Capture Back</a>
                </div>
            </div>
            <div id="skip" style="margin-top:5%">
                <div class="ui-grid-a">
                    <a style="background-color:#00b3b3;color:white;margin-left:30px;margin-right:30px;" id="skip_button" class="ui-btn ui-corner-all ui-shadow">Skip</a>
                </div>
            </div>
        </div>
    </div>

我的JavaScript代码是

var popupCaptureOptions = function() {
        var imgFrontElement = document.getElementById("ID_IMAGE_DIV");
        var content_width = $.mobile.activePage.find("div[data-role='content']:visible:visible").outerWidth();
        $('#capture_popupalert').css({'width':content_width*0.8});
        $("#capture_popupalert").popup("open");
        $("#back_capture").click(function() {
            capturedSide = CAPTURESIDE.CAPTURE_BACK;
            doCapture();
        });

        $("#skip").click(function() {
            $("#capture_popupalert").hide();
            imgFrontElement.style.backgroundColor = "white";
            Utils.showLoadingIndicator();
            if (currentModule == Module.MOBILEID) {
                MobileIDModule.extractData(frontCapturedImage, backCapturedImage, isOnBoardingFlow, region);
            } else if (currentModule == Module.CHECK) {
                CheckDepositModule.extractData(frontCapturedImage, backCapturedImage, isOnBoardingFlow, region);
            }
            frontCapturedImage = null;
        });
    };

请帮助我如何解决此问题。

Answer 1

这很简单。

jQuery Mobile 1.4.5不适用于最新的jQuery版本。

这些是jQM 1.4.5支持的jQuery版本：jQuery 1.8-1.11 / 2.1

有关它们的更多信息，请参见here。

因此，要么升级到jQM 1.5，要么使用旧版本的jQuery。

Answer 2

jQuery Mobile 1.5.0 release-candidate-1 在较新版本的jQuery上运行良好。我正在使用jQuery 3.2.1，并将JQM版本升级到1.5.0-rc1修复了我在使用JQM版本1.4.5时遇到的弹出问题。

您可以找到更新的JQM版本here，或者使用以下链接：

根据JQM's upgrade guide，

1.5默认情况下与1.4 API保持完全兼容性。这是通过在1.5 API之上重建1.4 API来实现的。

暗示您可能会遇到最小的向后兼容性问题。

将jQuery从1.11.1升级到3.3.1后的弹出问题

2 个答案: