如何使用jQuery获取点击的动态生成元素的绑定数据

步骤1：修改动态HTML生成逻辑 #

你需要先把要获取的meterNumber和value两个字段，都存到卡片外层容器的data-*自定义属性中，方便后续读取：

let setHistory = () => {
   $('#transaction-history').empty();
    transactionHistory.forEach((o) => {
        var htmlBlock = "";
        // 给外层卡片容器添加两个自定义data属性存关联数据
        htmlBlock += `<div class="btn btn-outline transaction-history-item d-flex flex-column justify-content-center mr-4" 
                        data-meter-number="${o.meterNumber}" 
                        data-value="${o.value}">`
            + `<img class="transaction-history-item-image card pl-2 pr-2 pt-1 pb-1 mx-auto" src="../assets/placeholder-image.png" alt="" >`
            + `<div class="transaction-history-number mt-1 mx-auto">${o.meterNumber}</div>`
            + `<div class="transaction-history-value mx-auto">Rp${o.value.toLocaleString().replaceAll(',','.')}</div>`
            + `</div>`;
        $('#transaction-history').append(htmlBlock);
    });
}

步骤2：绑定事件委托监听 #

因为卡片是动态生成的，直接给.transaction-history-item绑定点击事件会失效，需要把事件委托给页面上始终存在的父容器#transaction-history：

// 这段代码只需要在页面初始化时执行一次即可，不需要放到setHistory里重复绑定
$('#transaction-history').on('click', '.transaction-history-item', function() {
    // 读取当前点击卡片绑定的数据
    const meterNumber = $(this).data('meterNumber');
    const value = $(this).data('value');
    // 打印数据，可替换为你的业务逻辑
    console.log('点击卡片数据：', { meterNumber, value });
})

代码说明 #

• 事件委托的方式不会因为你后续调用setHistory重绘卡片导致点击事件失效，性能也优于给每个卡片单独绑定事件
• jQuery的data()方法会自动把data-属性的短横线命名转为驼峰格式，比如data-meter-number可以直接通过data('meterNumber')读取
• 拿到数据后可以直接用于后续的业务操作，比如弹窗展示、接口请求等

内容的提问来源于stack exchange，提问作者Sigmalalalala