单击事件时访问jquery中动态创建的数据属性

我正在尝试创建一个模块，允许用户比较不同的产品，当用户单击add进行比较时，它将在比较框的

数据列表

属性中附加该产品的id，该部分工作正常

主要问题是，当我试图从比较框访问数据属性值时，它只返回第一次单击时的值

例如，假设用户向比较框添加了三种产品，但如果他单击比较框，它将返回这三种产品，但如果他/她尝试删除选定的产品

数据属性

，仍然返回最初添加的这三种产品，并且既不向比较框添加新产品，也不从比较框中删除任何产品

下面是代码：
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>

您使用的数据API是错误的<代码>

仅告诉浏览器此元素具有预定义的数据API元素。稍后，任何操作都将使用内存中的数据对象（在元素的DOM表示中不可见）

要获取/设置数据属性，必须使用

$（选择器）.data（'key'，valueToSet）

所以

$（“#比较框”）.data（'list'）和
$（“#比较框”）。数据（'list'，selectedList）

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);
});