Question

我有一个页面，其内容是通过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" width="75%" height="75%" />
                                <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执行了Add Button的绑定，因此当用户点击特定项时，我使用“$（this）”捕获数据。

因此弹出窗口显示，但是当我点击Okay按钮关闭时，我需要点击两次，而不是一次。我看到URL更改，但直到第二次单击才关闭。这是密切的代码：

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

这是附加到类而不是ID（名称）的绑定的函数。当我在带有断点的萤火虫中运行时没有错误。它几乎就像创建了两个弹出窗口，但我只看到一个打开。如果没有双击okay按钮，我怎么能告诉我有两个或如何clsoe。

我将添加我在另一个页面上执行相同的过程（这是我从中复制此代码的位置）并且它可以正常工作。但是，该页面不使用转发器，我使用其名称而不是类来绑定“添加”按钮。

Answer 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" });

jquery移动弹出窗口，需要两次点击才能关闭

1 个答案: