首頁 > 開發者 > JavaScript
jQuery Mobile 載入對話方塊頁面時 javascript 函數衝突、覆蓋問題
版本：jQuery Mobile 1.1.0/1.2.0
問題描述：有兩個頁面 main.cshtml 和 dialog.cshtml 。兩個頁面都是基於.NET MVC4的，都使用了預設範本 _layout.cshtml。
在main.cshtm頁面上，使用javascript載入資料列表，點選連結後，以對話方塊形式彈出dialog.cshtml頁面，dialog.cshtml頁面上也採用javascript進行資料載入。
彈出對話方塊後關閉對話方塊，發現main.cshtml上的javascript函數不可用了！
經過實驗發現，這是由於jQuery Mobile使用ajax方式載入頁面，導致兩個頁面的javascript同名函數產生了衝突！
.NET MVC 4的_layout.cshtml 模板內容如下：
<!DOCTYPE html><html lang="zh"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta charset="utf-8" /> <title>@ViewBag.Title</title> <meta name="viewport" content="width=device-width" /> <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> @Styles.Render("~/Content/mobileCss", "~/Content/css") @Scripts.Render("~/bundles/modernizr") </head><body> <div data-role="page" data-theme="b"> <div data-role="header"> @if (IsSectionDefined("Header")) { @RenderSection("Header") } else { <h1>@ViewBag.Title</h1> } </div> <div data-role="content"> @RenderBody() </div> </div> @Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile") @RenderSection("scripts", required: false)</body></html>
當我們建立頁面，並在頁面中寫<script>...</script>和html標籤時，實際上是寫在了模板頁面如下的div中：
<div data-role="content">
@RenderBody()
</div>
當jQuery Mobile使用ajax方式載入其它頁面時，實際上只是載入了該頁面的 <div data-role="content">....</div>部分。
如果兩個頁面的<div data-role="content">....</div>中存在同名的javascript函數，則會導致衝突！關閉對話方塊頁面後，mian.cshtml 頁面的 javascript 函數會變成 dialog.cshtml
的同名javascript函數！
jQuery Mobile 的ajax載入原理如所示：
總結如下：
當使用jQuery Mobile進行開發時，如果多個相互跳轉的頁面都有javascript函數，則應該將每個頁面的Javascript函數以不同的名字命名，避免導致同名函數的覆蓋衝突問題。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
