Значение dataset jquery и dataset JS отличаются

Question

Сегодня я столкнулся с непонятной для меня вещью. Возможно, это связано со спецификой Jquery, но мне очень интересно и в то же время непонятно почему так.

Если проделать следующую последовательность действий:

Нажать "Кнопка 1"
Нажать "Жми"

Здесь мы видим $multy = multyJS = 1

Нажать "Кнопка 2"
Нажать "Жми"

И вот здесь $multy = 1, а multyJS = 2. Причем data-multy у элемента popup = 2.

Собственно, почему так?

let popup = document.querySelector('.popup');

setDataToPopup = (button) => {
popup.dataset.multy = button.dataset.multy;
console.log(popup.dataset.multy);
}

$('body').on('click', '.popup .popup-button', function () {
let $popup = $(this).closest('.popup');
let $multy = $popup.data('multy');
console.log('data-multy from Jquery ' + $multy);
let multyJS = document.querySelector('.popup').dataset.multy;
console.log('data-multy from JS ' + multyJS);


})

document.querySelectorAll('.button').forEach((button) => {
  button.addEventListener('click', () => setDataToPopup(button))
})

.popup {
  margin-bottom: 30px;
}

.button-one {
  display: block;
  margin-bottom: 30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="popup">
  <div class="popup-button">Жми</div>
</div>

<div class="button button-one" data-multy='1'>Кнопка 1 </div>
<div class="button" data-multy='2'>Кнопка 2 </div>

Answer 1

jQuery кэширует датасет, поэтому не рекомендуется смешивать обращения $(element).data и element.dataset.

https://api.jquery.com/data/

An element's data-* attributes are retrieved the first time the data() method is invoked upon it, and then are no longer accessed or mutated (all values are stored internally by jQuery).

то есть

Атрибуты data- элемента извлекаются при первом вызове метода data() для него, а затем больше не читаются и не изменяются (все значения хранятся внутри jQuery).

Также: https://api.jquery.com/removeData/

БЛОГ НА HUSL

Значение dataset jquery и dataset JS отличаются

Ответы (1 шт):