【问题标题】：JQuery Mobile data-rel=dialog not firing on iPhone or iPadJQuery Mobile data-rel = 对话框未在 iPhone 或 iPad 上触发
【发布时间】：2012-11-07 19:52:13
【问题描述】：

我发现了一个没有人回答的与我的确切问题有关的问题：

https://stackoverflow.com/questions/11218707/jquery-mobile-data-rel-dialog-not-firing

我有一个对话框，当用户按下按钮时应该打开。它适用于所有桌面浏览器和 Android 浏览器。它不适用于 iPhone 或 iPad 上的 Safari。如果你在iDevice上刷新页面，它就可以工作了。

这是我的按钮：

<a href="#popup" data-role="button" data-rel="dialog" data-icon="gear" data-iconpos="right" data-transition="slidedown">@Model.selectedDate.ToShortDateString()</a>

这是我的对话：

<div data-role="dialog" id="popup">

<div data-role="header" data-theme="b">
    <h1>Production Date</h1>
</div>

<div data-role="content" data-theme="b">

@using (Html.BeginForm()) { 
    <div data-role="fieldcontainer">
        @Html.LabelFor(model => model.selectedSystem, "Select a date for System " + Model.selectedSystem)
        @Html.HiddenFor(model => model.selectedSystem)
        @Html.LabelFor(model => model.selectedDate, "Date:")
        @Html.TextBoxFor(model => model.selectedDate, new { type = "date" })
    </div>

    <button type="submit" data-theme="b">Select</button>
}
</div>

这里是渲染页面的页面源代码：

    <div data-role="page" id="mainpage" data-theme="b">
    <div data-role="header" data-theme="b" data-position="fixed">
        <center>
            <a href="/Home/Main">
                <img src="/mobileDemo/Images/company_header_logo_mobile.png" border="0" /></a>
        </center>
    </div>
    <div style="text-align: center; padding-top: 5px">
        <center>
            <a href="/mobileDemo/Home/Main">
                <img src="/mobileDemo/Images/menu_home.png" style="width: 40px" border="0" /></a>
            <a href="/mobileDemo/Counts">
                <img src="/mobileDemo/Images/menu_prodcounts.png" style="width: 40px" border="0" /></a>
            <a href="/mobileDemo/Inventory">
                <img src="/mobileDemo/Images/menu_inventory.png" style="width: 40px" border="0" /></a>
            <a href="/mobileDemo/Vehicle">
                <img src="/mobileDemo/Images/menu_vehicle.png" style="width: 40px" border="0" /></a>
            <a href="/mobileDemo/SSAR">
                <img src="/mobileDemo/Images/menu_ssar.png" style="width: 40px" border="0" /></a>
            <a href="/mobileDemo/STAR">
                <img src="/mobileDemo/Images/menu_star.png" style="width: 40px" border="0" /></a>
            <a href="/mobileDemo/EXECDASH">
                <img src="/mobileDemo/Images/menu_dashboard.png" style="width: 40px" border="0" /></a>
        </center>
    </div>
    <div style="padding-left: 20px; padding-top: 10px">
        <strong>Body Dashboard for System 1</strong>
    </div>
    <div style="padding-right: 15px; padding-left: 15px; padding-top: 10px">
        <a href="#popup" data-role="button" data-rel="dialog" data-icon="gear" data-iconpos="right"
            data-transition="pop">11/7/2012</a>
        <hr />
        <ul data-role="listview" data-inset="true">
            <li><a href="/mobileDemo/ExecDash/BodyProd/1/11-07-2012">Production</a></li>
            <li><a href="/mobileDemo/ExecDash/BodyOEE?system=1&amp;date=11-07-2012">Body OEE</a></li>
            <li><a href="/mobileDemo/ExecDash/BodyDKS?system=1&amp;date=11-07-2012">Doukie-Seisan
                KPI</a></li>
            <li><a href="/mobileDemo/ExecDash/BodyDT?system=1&amp;date=11-07-2012">Down Time</a></li>
        </ul>
    </div>
</div>

生产日期

选择系统 1 的日期日期：选择

另外值得注意的是，我正在向视图传递一个参数。网址如下所示：

http://internal-server/mobileDemo/ExecDash/Body/1

当正在显示对话框时会发生以下情况：

http://internal-server/mobileDemo/ExecDash/Body/1#&ui-state=dialog

什么时候在 iDevice 上不起作用（刷新之前），这是我按住按钮时显示的内容，它为我提供了在新选项卡中打开/打开选项：

http://internal-server/mobileDemo/ExecDash/Body/1#popup

我做错了什么？

【问题讨论】：

以及它的价值...它在 iPhone 或 iPad 上的 Chrome 中不起作用（除非您刷新页面）。
我编辑了我的问题并包含了整个页面源代码。此外，当我使用我的桌面 Safari 并将用户代理设置为 iPhone 时，它可以工作。当我使用 Chrome 并将用户代理设置为 iPhone 时，它不会。
我刚刚捕获了初始渲染（当对话框不显示时）和刷新后（当它显示时）的页面源。使用 WinDiff，它们是相同的。
作为记录，我从来没有得到纠正。我只是重组了我的应用程序，这样我就不需要使用对话框了。

标签： asp.net-mvc jquery-mobile

【解决方案1】：

我让你的例子做了一些小的调整。

使用 VS2012 创建的新项目选择了移动模板。
然后在我的 Home/Index.cshtml 中添加了您的标签，即触发弹出窗口的按钮。将代码更改为文本 @DateTime.Now.ToShortDateString() 因为我没有你的模型。

我在关闭 data-role="page" 后立即将您的对话框粘贴到 _Layout.cshtml 中，请参见下面的代码：

<body>
<div data-role="page" data-theme="b">
    <div data-role="header">
        @if (IsSectionDefined("Header")) {
            @RenderSection("Header")
        } else {
            <h1>@ViewBag.Title</h1>
            @Html.Partial("_LoginPartial")
        }
    </div>
    <div data-role="content">
        @RenderBody()
    </div>
</div>

<div data-role="dialog" id="popup">
    <div data-role="header" data-theme="b">
        <h1>Production Date</h1>
    </div>
    <div data-role="content" data-theme="b">

    @using (Html.BeginForm()) { 
        <div data-role="fieldcontainer">
            <label>hello world</label>

        </div>

        <button type="submit" data-theme="b">Select</button>
    }
    </div>
</div>

@Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile")
@RenderSection("scripts", required: false)

如您所见，由于没有您的模型，我还取出了您的一些代码，所以我用“hello world”标签代替。那我为什么要这样做呢？好吧，我尝试将对话框放在 index.cshtml 中，但这意味着对话框 HTML 正在 data-role="page" 中获取输出。所以它不是为我开火。一旦我将它移到 data-role="page" div 之外，它就起作用了。在 iPhone5 上进行了测试，并且可以正常工作（无需刷新）。我在这篇文章中注意到你的标记的一件事是你错过了一个结束 DIV。所以我不确定这是复制/粘贴错误还是什么。尝试我的确切步骤，您应该会看到它可以正常工作并且 iDevice 很好。

【讨论】：

感谢达龙的努力。我在我的 _layout.cshtml 中使用 @RenderSection() 以输出任何辅助页面，例如此对话框。此外，如果我放入一个更“香草”的对话框页面，它确实可以工作。我确实有一个复制/粘贴问题，并且缺少一个结束 DIV 标记。我的错。
更正：当我放入更“原版”的对话框页面时，它不起作用。