jquery mobile popup，需要点击两次才能关闭

Posted 2023-05-09

【中文标题】jquery mobile popup，需要点击两次才能关闭

【英文标题】：jquery mobile popup, needs two clicks to close

【发布时间】：2013-06-03 22:53:00

【问题描述】：

我有一个页面，其内容是通过 ASP 转发器动态创建的

            <div id="divrowToShow" runat="server">
            <ul data-role="listview" data-theme="a">
                <asp:Repeater ID="wishlistRepeater" runat="server">
                    <ItemTemplate runat="server">
                        <li data-icon="hand-right" data-theme="b" id="item<%#Container.DataItem("pid")%>">
                           <a href='ProductItem_sdm.aspx?pid=<%#Container.DataItem("pid")%>' rel="external">
                                <img src="/images/widerLayout/product/thumb/<%#Container.DataItem("pid")%>.jpg"   />
                                <p style="color:Red; font-size:x-small">item# - <%#Container.DataItem("pid")%></p>
                                <p style="font-size: x-small; font-weight:bold" class="pd<%#Container.DataItem("pid")%>"><%#Container.DataItem("title")%></p>
                                <p style="font-size: x-small" class="currency p<%#Container.DataItem("pid")%>"><%#Container.DataItem("price")%></p>
                            </a>
                            <fieldset class="ui-grid-a">
                                <div class="ui-block-a">
                                    <a href="#" id="btnAddCart-<%#Container.DataItem("pid")%>" class="btnAddCart" data-role="button" data-mini="true" data-theme="a" data-icon="shopping-cart">To Cart</a>
                                </div>
                                <div class="ui-block-b">
                                    <a href="#" id="btnRemoveWish-<%#Container.DataItem("pid")%>" class="btnRemoveWish" data-role="button" data-mini="true" data-theme="b" data-icon="remove" data-iconpos="right">Remove</a>
                            </fieldset>                            
                        </li>
                    </ItemTemplate>
                </asp:Repeater>
            </ul>
        </div>

这是弹出窗口的叠加层

        <!-- an overlay for indicating success adding to the cart -->
    <div id="wishItemAdded" data-role="popup" data-overlay-theme="a" class="ui-content">
        <p>
            Item
            <label id="lblwsItemDesc">
            </label>
            was added to the cart</p>
        <a href="javascript:void(0)" data-icon="ok" data-inline="true" data-role="button"
            id="btnwishCartOk" data-theme="a">Okay</a>
    </div>

请注意，我有两个按钮，一个用于删除，一个用于添加。单击添加时，将运行代码以将数据添加到数据库，但在返回时我会更新显示，然后显示一个弹出框以通知用户。

    $(".btnAddCart").bind("click", function (event) 

    var itemid = $(this).attr("id").replace("btnAddCart-", "");
    var qty = 1;  // we are just going to force a qty of one, they can fix it in the cart
    var price = $(".p" + itemid).text().replace("$", "");

    // the result is the new cart count, we use that to change the display
    var result = addToCart(itemid, qty, price);

    setCartDisplay(result);

    if (result > 0) 
        setCartDisplay(result);
        // display a nice message to say all went well
        $("#lblwsItemDesc").text($(".pd" + itemid).text());

        //set up some basic options for display
        $("#wishItemAdded").popup( dismissible: false );
        $("#wishItemAdded").popup( transition: "fade" );

        **$("#wishItemAdded").popup("open");**
    
);

所有这些都可以正常工作。我使用类而不是 ID 执行了添加按钮的绑定，因此当用户单击特定项目时，我使用“$(this)”捕获数据。

所以弹出窗口显示，但是当我单击“确定”按钮关闭时，我需要单击两次，而不是一次。我看到 URL 发生了变化，但直到第二次单击它才会关闭。这是关闭代码：

    // clear off the response message ffor adding to cart
$("#btnwishCartOk").bind("click", function (event, ui) 
    $("#wishItemAdded").popup("close");
);

这是绑定到类而不是 ID（名称）的函数。当我在带有断点的萤火虫中运行时，没有错误。这几乎就像创建了两个弹出窗口，但我只看到一个打开。我怎样才能知道我有两个，或者如何在不双击确定按钮的情况下关闭。

我会补充一点，我在另一个页面上执行相同的过程（这是我复制此代码的地方）并且它可以工作。但是，该页面不使用转发器，并且我使用其名称而不是类来绑定 Add 按钮。

【问题讨论】：

尝试在$("#wishItemAdded").popup("open") 上设置断点以确认弹出窗口是否被多次调用...

我做到了，而且 Open 只触发了一次。我也把一个放在关闭。它显然会触发我击中断点，继续并关闭执行，但不会删除覆盖。当我再次单击“确定”时，再次命中断点，我继续，这次覆盖（弹出）被删除。

你能用你的代码做一个 jsfiddle 吗？

【参考方案1】：

尝试从此更改您对弹出窗口的调用：

//set up some basic options for display
$("#wishItemAdded").popup( dismissible: false );
$("#wishItemAdded").popup( transition: "fade" );

$("#wishItemAdded").popup("open");

到这里：

//set up some basic options for display
$("#wishItemAdded").popup("open",  dismissible: false, transition: "fade" );

【讨论】：

好的，我试过了，虽然我更喜欢代码，但我仍然得到相同的结果。一定有什么东西打开了另一个弹出窗口，因为当我把两个关闭在一起时，它可以工作