jQuery Mobile:如何使对话框打开多次

jQuery Mobile: How to make dialog open more than once

本文关键字：对话框 何使 Mobile jQuery      更新时间：2023-09-26

我不确定这是否是一个bug，或者如果它是jQuery移动对话框的标准方法，但我有一个dialog框，当你点击按钮和页面新加载时打开。然而，当你关闭和再次打开它时，它会闪烁打开和关闭。是否有办法让对话框打开不止一次??

EDIT:我已经编辑了我的代码，以包括第二个data-role="page"，因为我的问题只发生在第二页。

下面是我的代码:

h1> 
 <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>List App</title>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <script src="../JS/jquery.mobile.icons-1.4.5.min.css"></script>
    <script src="../JS/list.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/>
    <link rel="stylesheet" href="../CSS/stylesheet.css"/>
    <link rel="stylesheet" href="../CSS/jquery.mobile.icons-1.4.5.min.css"/>
    <link rel="stylesheet" href="../CSS/jquery.mobile.inline-png-1.4.5.min.css"/>
    </head>
     <body>
<!--FIRST PAGE-->   
<div data-role="page" id="filterPage">
        <div data-role="header" data-theme="b">
             <h1>List App</h1>
       </div>
        <div data-role="content">
            <ul data-role="listview" id="chipperList" data-filter="true" data-filter-reveal="false" data-filter-placeholder="Chose a County..." data-divider-theme="a" data-inset="false" data-transition="slide" >
                <li data-role="list-divider" data-theme="b" role="heading" >County</li>
            </ul>
        </div>
 </div>  
<!--SECOND PAGE-->
        <div data-role="page" id="listDetails">
            <div data-role="header" data-theme="b">
             <h1>List App</h1>
             <div data-role="navbar" data-rel="back">
              <a href="#filterPage" class="ui-btn ui-icon-search ui-btn-icon-left">Return to Search</a>
              </div>
            </div>
    <div data-role="content"></div>

        <div data-role="footer" data-theme="b" data-position="fixed">
            <div data-role ="navbar">    
                <ul>
        <li><a href="#freeCoupon" data-rel="dialog" data-transition="pop">Free Coupon</a></li> 

                </ul>
            </div>
            </div>

    </div> 

<!--COUPON--> 
         <div data-role="dialog" id="freeCoupon"> 
             <div data-role="header" data-theme="b"> 
             <h1>Congratulations!</h1>      
    </div>
             <div data-role ="content">
                <img src="../CSS/IMAGES/coupon.jpg"/>
             </div> 
         </div>
    </body>   
    </html>
<标题> LIST.JS h1> $(document).on("pageinit", "#filterPage", function () { $.getJSON("../JSON/list_data.json", function(info){ var li = ""; $.each(info, function (i, name) { li += '<li><a href="#" id="' + i + '" data-transition="slide" class="info-go">' + name.county + '</a></li>'; $("#chipperList").empty(); $("#chipperList").append(li).promise().done(function () { $(this).on("click", ".info-go", function (e) { e.preventDefault(); $("#listDetails").data("info", info[this.id]); $.mobile.changePage("#listDetails"); }); $(this).listview("refresh"); }); }); }); }); $(document).on("pagebeforeshow", "#listDetails", function () { var info = $(this).data("info"); var info_view = ""; for (var key in info) { info_view += '<div class="ui-grid-a"><div class="ui-block-a"><div class="ui-bar field" style="font-weight : bold; text-align: left;">' + key + '</div></div><div class="ui-block-b"><div class="ui-bar value" style="width : 70%">' + info[key] + '</div></div></div>'; } $(this).find("[data-role=content]").html(info_view); }); <标题> LIST_DATA。JSON h1> [{ "county": "Antrim", "name": "Flash in The Pan", "address": "Main Street, Bushmills", "info": "Dummy Text" }, { "county": "Armagh", "name": "The Galley", "address": "Barrack Street, Armagh", "info": "Dummy Text" }, { "county": "Carlow", "name": "Roosters", "address": "Market Square, Bagenalstown", "info": "Dummy Text" } ]

下面的代码将解决您的问题:

home。 

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>List App</title>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <script src="../JS/jquery.mobile.icons-1.4.5.min.css"></script>

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/>
    <link rel="stylesheet" href="../CSS/stylesheet.css"/>
    <link rel="stylesheet" href="../CSS/jquery.mobile.icons-1.4.5.min.css"/>
    <link rel="stylesheet" href="../CSS/jquery.mobile.inline-png-1.4.5.min.css"/>
    <script>
    $(document).on("pageinit", "#filterPage", function () {
    $.getJSON("../JSON/list_data.json", function(info){
    var li = "";
    $.each(info, function (i, name) {
        li = $('<li class="info-go"><a href="#" id="' + i + '" data-transition="slide" >' + name.county + '</a></li>');
        li.data("info",name);

    $("#chipperList").append(li);
    });
    $("#chipperList").listview("refresh");
    });
    });
     $(document).on("click", ".info-go", function (e) {
            $("#listDetails").data("info", $(this).data("info"));

            $.mobile.changePage("#listDetails");
        });

$(document).on("pagebeforeshow", "#listDetails", function () {
    var info = $(this).data("info");
    var info_view = "";
    for (var key in info) {
        info_view += '<div class="ui-grid-a"><div class="ui-block-a"><div class="ui-bar field" style="font-weight : bold; text-align: left;">' + key + '</div></div><div class="ui-block-b"><div class="ui-bar value" style="width : 70%">' + info[key] + '</div></div></div>';
    }
    $(this).find("[data-role=content]").html(info_view);
});
    </script>
    </head>
     <body>
<!--FIRST PAGE-->   
<div data-role="page" id="filterPage">
        <div data-role="header" data-theme="b">
             <h1>List App</h1>
       </div>
        <div data-role="content">
            <ul data-role="listview" id="chipperList" data-filter="true" data-filter-reveal="false" data-filter-placeholder="Chose a County..." data-divider-theme="a" data-inset="false" data-transition="slide" >
                <li data-role="list-divider" data-theme="b" role="heading" >County</li>
            </ul>
        </div>
 </div>  
<!--SECOND PAGE-->
        <div data-role="page" id="listDetails">
            <div data-role="header" data-theme="b">
             <h1>List App</h1>
             <div data-role="navbar">
              <a href="#filterPage" class="ui-btn ui-icon-search ui-btn-icon-left" ata-rel="back">Return to Search</a>
              </div>
            </div>
    <div data-role="content"></div>

        <div data-role="footer" data-theme="b" data-position="fixed">
            <div data-role ="navbar">    
                <ul>
        <li><a href="dialog.html" data-rel="dialog" data-transition="pop">Free Coupon</a></li> 

                </ul>
            </div>
            </div>

    </div> 
    </body>   
    </html>

dialog.html 

 <div data-role="dialog" id="freeCoupon"> 
             <div data-role="header" data-theme="b"> 
             <h1>Congratulations!</h1>      
    </div>
             <div data-role ="content">
                <img src="../CSS/IMAGES/coupon.jpg"/>
             </div> 
         </div>

尝试删除".. "

<script src="../JS/jquery.mobile-1.4.5.min.js"></script>

: 

 <script src="JS/jquery.mobile-1.4.5.min.js"></script>

你可能需要将autoOpen设置为false，并将点击事件处理程序应用于对话框，因为这个问题听起来像是每次点击对话框都在重新创建。

试着把这个添加到页面:

$(document).ready(function() {
    $('#freeCoupon').dialog({
        autoOpen: false
    });
    $('#freeCoupon').click(function() {
        $('this').dialog('open');
    });
});
编辑:

如果这不起作用，那么我猜jQuery移动文件没有被正确链接。暂时，尝试使用CDN url并替换:

<script src="../JS/jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" href="../CSS/jquery.mobile-1.4.5.min.css"/>

: 

<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
相关文章：