4

ユーザーがアイテムを選択できる Web サイトがあり、数量を含む詳細が表示されます。また、div 内にボタンを含めて、クリックすると数量が 1 減少するようにしました。

        $("#btnBuy1").click(function()
        {
            if (!sessionStorage['quantity1'])
            {
                sessionStorage['quantity1']=1;

            }
            else
            {
                sessionStorage['quantity1']++;
            }
            $("#dropbox").html('<div id = "1"><img class = "thumb" id = "t1" src="../images/birthday_metoyou.jpg" />' + teddy[1].desc + ", Price £"
             + teddy[1].price + ", Quantity: " + sessionStorage.getItem('quantity1') + "<button id = 'btnRemove1'>Remove</button></div><br/>");
            updateBasket();
            sessionStorage["total1"] = parseInt(sessionStorage.getItem('quantity1')) * teddy[1].price;
            updateSubtotal();
            if (Modernizr.sessionstorage) 
            {  // check if the browser supports sessionStorage
                myids.push(teddy[1].partnum); // add the current username to the myids array
                sessionStorage["ids"]=JSON.stringify(myids); // convert it to a string and put into sessionStorage
            } 
            else 
            {
             // use cookies instead of sessionStorage
            }            
        });

$("#btnRemove1").click(function()
{
   alert(remove);
});

ボタンが正常に機能しているかどうかを確認するために警告メッセージを表示しましたが、btnRemove1 ボタンをクリックしても何も起こりません。

4

6 に答える 6

10

ボタンは動的に追加されるので、試してみてください:

$(document).on('click', '#btnRemove1', function() {
{
   alert("remove"); //I dont know what remove was is the example, added quotes around it.
});
于 2013-03-27T17:41:58.697 に答える
2

これは、ボタンが後で (動的に) 追加されるためです。デリゲートを使用する必要があります。

これには body を使用する必要はありません。#btnRemove1 の親である、動的に挿入されない要素はすべて実行されます。

$('body').on('click','#btnRemove1',function(){
   alert(remove);
});

その理由は、要素 #btnRemove1 がページに存在する前にイベントをバインドするためです。したがって、イベントをバインドするものは何もありません。ただし、 body 要素はページに存在し、イベントを#btnRemove1に委任します。

于 2013-03-27T17:45:57.503 に答える
1

イベントをドキュメントに結び付けることができます（非推奨になる前にjQuery liveが行っていたこと）

今は次のとおりです。

$(document).on("click", "#btnRemove1", function(){})

または #btnRemove1 が Dom に追加された後にイベントを再バインドできます。

于 2013-03-27T17:45:17.247 に答える
1

ほとんどの場合、クリック イベントをアタッチする前に [削除] ボタンが DOM にありません。コード スニペットからはわかりにくいですが、[購入] ボタン アクションが正常に完了していない場合、[削除] は存在しません。

クリックイベントを添付して削除するポイントで、$（ "＃btnremove1"）のログをコンソールしてみてください。長さが存在するかどうかを確認するか、ブレークポイントを使用します。

コードを改善するには、次のように、変数 $("#dropbox") にキャッシュし、その中でボタンを探します。

var $dropBoxNode = $("#dropbox");
$dropBoxNode.find("#btnRemove1");

また、非推奨の .click() の代わりに .on() を使用する必要があります。

于 2013-03-27T17:49:40.490 に答える
0

削除ボタンを作成した後、削除ボタンのクリックハンドラを追加してみてください

///Code snippit

$("#dropbox").html('<div id = "1"><img class = "thumb" id = "t1" src="../images/birthday_metoyou.jpg" />' + teddy[1].desc + ", Price £"
                     + teddy[1].price + ", Quantity: " + sessionStorage.getItem('quantity1') + "<button id = 'btnRemove1'>Remove</button></div><br/>");

$("#btnRemove1").click(function()
{
     alert(remove);
});

updateBasket();

///Code snippit
于 2013-03-27T17:44:05.777 に答える