jquery 移动弹出窗口行为奇怪答案

【问题标题】：jquery mobile popups acting stranglyjquery 移动弹出窗口行为奇怪
【发布时间】：2015-01-12 00:38:05
【问题描述】：

当您有两个带有弹出窗口的页面时，事情似乎很奇怪。

我创建了这个简单的示例来演示我所看到的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css">
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
    <script src="libs/jquery.mobile.paramsHandler-1.4.2.js"></script>
    <script src="clickdemo.js"></script>

    <style>
        .thumbnail
        {
            float: left;
            width: 80px;
            border: 1px solid #999;
            margin: 0 15px 15px 0;
            padding: 5px;
            text-align:center;
        }

        .thumbnail img
        {
            width: 80px;
            height: 80px;
        }
    </style>



</head>
<body>



    <div data-role="page" id="Home">

        <div data-role="main" class="ui-content">

            <a href="#workingPage" class="ui-btn">Working Page</a>
            <a href="#brokenPage" class="ui-btn">Broken Page</a>

        </div>

    </div>




    <div data-role="page" id="workingPage">

        <div data-role="popup" id="workingImagePopup" data-overlay-theme="b" data-theme="b" data-corners="false">
            <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
            <img id="WorkingPopUpPhoto" class="PopPhoto" src=""  alt="">
        </div>

        <div data-role="main" class="ui-content">
            <div class="thumbcontainer">
                <div class="thumbnail">
                    <img src="http://www.funnypica.com/wp-content/uploads/2012/05/Funny-UglyMan.jpg" alt="" ><br>
                </div>
                <div class="thumbnail">
                    <img src="http://www.funnypica.com/wp-content/uploads/2012/05/Crazy-Face-570x403.jpg" alt="" ><br>
                </div>
            </div>
        </div>

    </div>

    <div data-role="page" id="brokenPage">

        <div data-role="popup" id="brokenImagePopup" data-overlay-theme="b" data-theme="b" data-corners="false">
            <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
            <img id="brokenPopUpPhoto" class="PopPhoto" src=""  alt="">
        </div>

        <div data-role="main" class="ui-content">
            <div class="thumbcontainer">
                <div class="thumbnail">
                    <img src="http://www.funnypica.com/wp-content/uploads/2012/05/Funny-UglyMan.jpg" alt="" ><br>
                </div>
                <div class="thumbnail">
                    <img src="http://www.funnypica.com/wp-content/uploads/2012/05/Crazy-Face-570x403.jpg" alt="" ><br>
                </div>
            </div>
        </div>

    </div>

</body>
</html>

然后我用这个 JS 备份该代码

$(document).on("pagecreate", "#workingPage", function () {
    $(".thumbnail img").click(function (e) {
        alert("clicked");
        var thumbnailPath = $(this).attr("src");

        $('#WorkingPopUpPhoto').attr("src",thumbnailPath); //set the image source of the popup

        $('#workingImagePopup').popup('open'); //open the popup
    });
});

$(document).on("pagecreate", "#brokenPage", function () {
    $(".thumbnail img").click(function (e) {
        alert("clicked");
        var thumbnailPath = $(this).attr("src");

        $('#brokenPopUpPhoto').attr("src",thumbnailPath); //set the image source of the popup

        $('#brokenImagePopup').popup('open'); //open the popup
    });
});

由于两个页面非常相似（剪切和粘贴，仅更改了 ID），我希望它们的工作方式相同。如果单击图像，您将看到一个警报，然后是弹出图像。预计这两个页面是相同的。单击图像，查看警报，然后是弹出窗口。

这就是我正在经历的。

我访问了工作页面（从家开始并导航到“工作页面”），一切正常。单击缩略图会显示警报和弹出图像。

然后我在浏览器中返回主页，然后单击“损坏的页面”（“工作页面”的副本），行为有所不同。单击图像时，首先您会看到两个警报（为什么？），然后不会显示弹出图像。

II重新加载并颠倒顺序（即：从“破碎的页面”开始）出现相同的模式，破碎的页面有效，工作页面现在破碎（暗示它不是标记或JS）

我做错了吗？

【问题讨论】：

jsfiddle.net/Palestinian/huc1ubs6

标签： jquery jquery-mobile jquery-mobile-popup

【解决方案1】：

您正在文档上注册 pageCreate 事件。这将导致在创建第一个页面时调用第一个例程，然后最终在创建第二个页面时调用这两个例程。

也许你想尝试这样做：

$("#brokenPage).on("pagecreate", function(){})

当我对应通用 DOM 元素时，我通常会执行 $(document).on(... -

还在每个处理程序回调中放置一个断点来验证这一点:)

我希望这在某种程度上有所帮助；）

【讨论】：