jQuery Mobile：如何使对话框不止一次打开

时间：2016-08-22 18:07:11

标签： javascript jquery jquery-mobile dialog

我不确定它是否是一个错误，或者它是否是jQuery Mobile中对话框的标准方法，但是当您单击按钮并且页面是新的时，我会打开一个dialog框加载。但是，当您关闭它并再次打开时，它会打开并关闭。有没有办法让对话框打开多次？

编辑：我已编辑了我的代码以包含第二个data-role="page"因为我的问题仅发生在第二页上。

这是我的代码：

HTML：

 <!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 

$(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 

[{
        "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"
    }
]

3 个答案:

答案 0 :(得分：0)

此代码将解决您的问题：

<强> Home.html中 

setdefault()

<强> dialog.html 

<!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>

答案 1 :(得分：-1)

尝试从此行中删除“../”：

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

到此：

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

答案 2 :(得分：-1)

您可能需要将autoOpen设置为false并将click事件处理程序应用于对话框，因为此问题听起来就像每次单击时都会重新创建对话框。

尝试将此添加到页面：

$(document).ready(function() {
    $('#freeCoupon').dialog({
        autoOpen: false
    });

    $('#freeCoupon').click(function() {
        $('this').dialog('open');
    });
});

修改

如果这不起作用，那么我猜猜jQuery Mobile文件没有正确链接。目前，请尝试使用CDN网址并替换：

<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">
相关问题
最新问题