jQuery Mobile 加载对话框页面时同名javascript函数冲突、覆盖问题

最新推荐文章于 2022-07-27 23:17:23 发布

海涛zht666

最新推荐文章于 2022-07-27 23:17:23 发布

阅读量4.3k

点赞数 1

分类专栏： jQuery

本文链接：https://blog.csdn.net/zht666/article/details/8608520

版权

jQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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加载原理如下图所示：