0

我有一个页面，其内容是通过 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 执行了添加按钮的绑定，因此当用户单击特定项目时，我使用“$(this)”捕获数据。

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

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

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

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

4

1 回答 1

0

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

//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" });
于 2013-06-07T17:05:39.107 回答