クリックイベントのjqueryで動的に作成されたデータ属性にアクセス

Question

ユーザーが異なる製品を比較できるようにするモジュールを作成しようとしています。比較のためにユーザーをクリックすると、その製品のIDがdata-listこの部分は正常に動作しています。

主な問題は、最初のクリックからの値のみを返す比較ボックスからそのデータ属性値にアクセスしようとするときです。

たとえば、ユーザーが3つの商品を比較ボックスに追加したとします。比較ボックスをクリックすると、3つの商品が返されますが、選択した商品を削除しようとすると、最初に追加された3つの商品比較ボックスに新製品を追加したり、比較ボックスから製品を削除したりすることはありません。あなたは間違ったデータAPIを使用している
HTML

<div class="checkbox-inline col-md-12 col-sm-12 col-xs-12" style="margin-left: 10px"> 
<label><input type="checkbox" class="compare-result" 
id="compare-<?php echo $product_id;?>" value="<?php echo $product_id;?>"> 
Compare</label> 
</div> 

<a href="#"> 
<div class="compare" id = "compare-box" data-list = "" > 
    <div style="margin-bottom: 5px;padding: 0px;font-size:13px"> 
    <h4>Compare Results (<span id="compare-items"></span>)</h4> 
    </div> 
</div> 
</a> 

のjQuery

var count = 0 
var list = $("#compare-box").attr('data-list'); 
if(list) 
{ 
    list = JSON.parse(list); 
} 
else 
{ 
    list = []; 
} 
$(".compare-result").on('click',function(){ 
if($(this).is(":checked")) 
{ 
if(count < 4) 
    { 
     var id = $(this).val(); 
     list.push(id); 
     count++;   
    } 
    else 
    { 
     event.preventDefault(); 
     $('input.compare-result').not(':checked').attr("disabled",true); 
     alert('you can only compare 4 product'); 
    } 
} 
else 
{ 
    var id = $(this).val(); 
    count--; 
    if(count < 4) 
    { 
     var index = list.indexOf(id); 
     if (index > -1) { 
      list.splice(index, 1); 
     } 
     $('input.compare-result').not(':checked').attr("disabled",false); 
    } 
    else 
    { 
     alert('error'); 
    } 
} 
selectedList = JSON.stringify(list); 
$("#compare-box").attr('data-list',selectedList); 
$("#compare-items").html(count); 
console.log(selectedList); 
}); 

//Main Problem 
$("#compare-box").on('click',function(){ 
var data = $("#compare-box").attr('data-list'); 
console.log(data); 
}); 

Answer 1

：ここ

はコードです。 <div data-list="">は、この要素があらかじめ定義されたデータAPI要素を持っていることをブラウザに通知します。後でどのようなアクションでも、メモリ内のデータオブジェクトが使用されます（つまり、要素のDOM表現では表示されません）。

データ属性を取得/設定するには、$(selector).data('key', valueToSet)を使用する必要があります。

so $("#compare-box").data('list');および$("#compare-box").data('list', selectedList);