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>

2 つのボタンがあることに注意してください。1 つは削除用、もう 1 つは追加用です。追加をクリックすると、コードが実行されてデータが DB に追加されますが、戻ると表示が更新され、ポップアップ ボックスが表示されてユーザーに通知されます。

    $(".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)」を使用してデータをキャプチャします。

そのため、ポップアップが表示されますが、[OK] ボタンをクリックして閉じるときに、1 回ではなく 2 回クリックする必要があります。URL の変更が表示されますが、2 回目のクリックで閉じるまでは表示されません。これは終了コードです:

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

これは、ID（名前）ではなくクラスにバインドするバインドの機能ですか。ブレークポイントを使用して firebug で実行すると、エラーは発生しません。2 つのポップアップが作成されているように見えますが、開いているのは 1 つだけです。2 つあることを確認するにはどうすればよいですか、または [OK] ボタンをダブルクリックせずに閉じるにはどうすればよいですか。

別のページ（このコードをコピーした場所）で同じプロセスを実行すると、機能することを追加します。ただし、そのページはリピーターを使用せず、クラスではなくその名前を使用して [追加] ボタンをバインドします。

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 に答える