jQuery 抓 DOM 上的 data-id 資料，但卻是舊的

發表於 更新於 Disqus：

前言

今天幫作後台的同事看 bootstrap 的 modal 傳值處理，想說用 jquery 去接跟傳 data-id 的值，突然發現第二筆資料以後的值沒有被更新。以下探討解決的過程

範例程式碼

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
$(document).ready(function () {
  // 編輯的 Modal 事件
  $('#editModal').on('show.bs.modal', function (event) {
    var btn = $(event.relatedTarget)
    var title = btn.data('title')
    var modal = $(this)
    modal.find('.modal-title').text(title)

    // get hidden input
    var tr = btn.parent().parent().parent()
    var hiddenInput = tr.find('td input')[0]
    console.log('hiddenInput', hiddenInput)

    // get id from hidden_input & set id to modal span
    var id = hiddenInput.value
    console.log('id', id)
    modal.find('.modal-id').text(id)
    modal.find('.payment-btn')[0].setAttribute('data-id', id)

    console.log($('table'))
  })

  // 主要看這裡
  $('.payment-btn').on('click', function (event) {
    console.log('this', $(this))

    // fail, data is old
    // var btn = $(this);
    // var id = btn.data('id');

    console.log('way 1', $(this).data('id')) // old value
    console.log('way 2', event.target.dataset.id) // new
    console.log('way 3', this.dataset.id) // new
    console.log('way 4', $(this).attr('data-id')) // new
  })
})

原因與解法

一開始我用 jquery 語法取得 button 的 data-id 屬性。原本以為成功了，後來才發現第二筆之後的資料都是舊的 QQ

1
console.log('way 1', $(this).data('id')) // old value

本來以為是 jquery 壞掉惹，就改用 JS 原生的語法取得 this 物件、跟取得 data-id

1
2
console.log('way 2', event.target.dataset.id) // new
console.log('way 3', this.dataset.id) // new

後來才發現用 jquery 的 .data() 方法，資料好像會被快取起來。網友建議改用 .attr 就能抓到新值了

1
console.log('way 4', $(this).attr('data-id')) // new

小結

我滿少用 jQuery 的，剛開始還真的以為 jQuery 壞掉惹 orz

參考資料