在jquery上點擊事件訪問動態創建的數據屬性

Question

我想創建一個讓用戶比較不同產品的模塊，當用戶點擊add時比較它會在data-list屬性中添加該產品的id比較框這部分工作正常。

主要問題是，當我嘗試從比較框中訪問該數據屬性值時，它只返回第一次點擊的值。

例如，假設用戶添加了三個產品來比較盒子，但是如果他點擊比較盒子，它將返回這3個產品，但如果他/她試圖移除所選產品data-attribute仍然返回那些最初添加的3個產品既不添加新產品比較框，也不從比較框中刪除任何產品。

這裏是代碼：
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

您正在使用的數據API錯誤。 <div data-list="">只告訴瀏覽器該元素具有預定義的數據API元素。稍後，任何操作都將使用內存中的數據對象（在元素的DOM表示中不可見）。

要獲取/設置數據屬性，您必須使用$(selector).data('key', valueToSet)。

所以$("#compare-box").data('list');和$("#compare-box").data('list', selectedList);