将 jQuery 从 1.11.1 升级到 3.3.1 后的弹出问题
Posted
技术标签:
【中文标题】将 jQuery 从 1.11.1 升级到 3.3.1 后的弹出问题【英文标题】:Popup issue after upgrading jQuery from 1.11.1 to 3.3.1 【发布时间】:2019-01-10 07:53:45 【问题描述】:我使用的是 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;
);
;
请帮我解决这个问题。
【问题讨论】:
在问题中提供您的 javascript 代码 您在升级过程中遇到了 两个 重大问题。你的代码有变化吗? jQuery 确实从 1->2 引入了许多重大变化,我相信他们从 2->3 也做了同样的事情 【参考方案1】:很简单。
jQuery Mobile 1.4.5 不适用于最新的 jQuery 版本。
这些是 jQM 1.4.5 支持的 jQuery 版本:jQuery 1.8 - 1.11 / 2.1
更多关于他们的信息可以在here找到。
所以要么升级到 jQM 1.5,要么使用旧版本的 jQuery。
【讨论】:
这为我解决了同样的问题。我正在运行 jQuery 2.2.4。已将移动设备降级到 2.1.4,现在问题消失了。 jQuery Mobile 1.5 在哪里? 3 年了,jQuery Mobile 和 1.5 还没有出来,latest 仍然不能与最新的 jQuery 一起工作...是时候转移到 Bootstrap...【参考方案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,或者使用以下链接:
jQuery.mobile.1.5.0-rc1.js(未压缩)
jQuery.mobile.1.5.0-rc1.min.js(缩小版)
jquery.mobile-1.5.0-rc1.min.css(主题)
根据JQM's upgrade guide,
默认情况下,1.5 与 1.4 API 保持完全兼容。这是通过在 1.5 API 之上重新构建 1.4 API 来实现的。
暗示您可能会遇到最小的向后兼容性问题。
【讨论】:
以上是关于将 jQuery 从 1.11.1 升级到 3.3.1 后的弹出问题的主要内容,如果未能解决你的问题,请参考以下文章
如何在 Mac OSX 上将我的 OpenGL 从 2.1 升级到 3.3?