jQuery、各アイテムに追加するクリックイベントのみを適用する

Question

$('div > .card-body > .text-muted').append('<div class="card-body" style="background-color:#292b2e;border-radius:5px;">'+data+'<a class="btn btn-secondary">Sell</a></div>').last().on('click', function(){ 
    console.log("SellClicked " + hatassetid); 
    window.location.href = "https://domain/asset/"+assetid+"/sell"; 
}); 

アクションを実行するためにクリック可能な新しいボタンを追加するjQueryスクリプトを解決しようとするのが面倒です。ボタンは表示され、それらはすべてクリック可能です。しかし、いずれかのボタンをクリックすると、追加されたすべてのボタンがSellClicked関数を実行し、最後に見つかったアイテムに終わり、クリックするボタンに関係なく毎回実行できるようになります。

クリック機能付きのクリック可能なボタンを追加する信頼性の高い方法はありますか？

出力は常に応答します。

SellClicked 84600 SellClicked 84683 SellClicked 84703 SellClicked 85056 SellClicked 85488 SellClicked 86296 SellClicked 87379 SellClicked 88709 SellClicked 90299 SellClicked 96525

Answer 1

あなた.on内から上console.log($(this))を行う場合、あなたはそれがあります見つけることができますボタンではなく親要素である.text_mutedを返します。これは、.on()メソッドがボタンではなくセレクタ$("div > .card-body > .text-muted")に適用されているためです。

これは、あなたのボタンが実際には動作していないことを示しています。これは '.text_muted'のイベントリスナーです（これをテストして確認しました）。また、ループの繰り返しごとにこの親要素の新しいイベントリスナーを作成することを意味します。したがって、繰り返し出力されます。これを解決するには

、私はそれを追加しながら、あなたのボタンにクラスを追加し、そのためのイベントリスナーを作成し、「（）上）（.last。」ドロップします：

$('div > .card-body > .text-muted').append('<div class="card-body" style="background-color:#292b2e;border-radius:5px;">'+data+'<a class="btn btn-secondary myButtonClass">Sell</a></div>') 

$(".myButtonClass").click(function(){ 
    <do something> 
}) 

ボーナス： あなたのコードは少し不完全なので、 'hatassetid'がどこから来ているのかはわかりませんが、ボタンをクリックしてデータを渡す必要がある場合は、アセットID（または何でも） "data-"属性として使用し、イベントリスナー関数からアクセスします。

<a class="btn btn-secondary myButtonClass" data-assetId='+assetID+'></a> 

、その後：それは[、最小限の完全な、かつ検証例]であなたの関連するコードを示しますように、私たちはより良いあなたを支援するために

$(".myButtonClass").click(function(){ 
     var assetId = this.data('assetid') //please note, data() attributes must be selected using all lowercase characters 
    }) 

See it in Plunker