Почему jQuery.data() не обновляет значение атрибута?

Question

[miniven]

Есть вот такой блок:

<div class="employee">
	<input type="text" class="select" name="program_name[]" onkeydown="return false;" data-active="0">
	<button class="delete-btn" data-type="delete"></button>
	<input type="text" name="employee_name" class="generate__input" id="employee_name" placeholder="Иванов Иван Иванович">
</div>

У него есть атрибут data-active со значением 0
Я динамически добавляют такой же елемент путем копирования и хочу, чтобы этот атрибут был на 1 больше последнего:

addBtn.click(function(e) {
		e.preventDefault();
		var lastId = $( ".employee:last .select" ).data('active');
		$( ".employee:first" ).clone().appendTo(".generate__section_employee");
		$( ".employee:last input" ).val('');
		$( ".employee:last .select" ).data('active', lastId + 1);
	});

И он вроде как изменился. Далее создаю переменную, где будет храниться значение атрибута для активного на данный момент инпута и вывожу этот номер в консоль:

var selectedId;

	$(document).on('click', '.select', function() {
		selectBox.show();
		selectedId = $(this).data('active');
		console.log('Выбранный селект: ' + selectedId);
	});

И в итоге в консоле все показывается правильно, а когда нахожу элемент в DOM, то там data-active все еще равен 0.
В чем проблема?

Answer 1

[Алексей Уколов]

В чем проблема?

В том, что jQuery.data() не обновляет значение атрибута ноды. Если вам нужно, чтобы значение обновлялось, используйте .attr('data-active', selectedId).
Но, скорее всего, вам это не нужно - вы же не читаете в скриптах значение этого атрибута не через jQ?

Comments

[miniven]

Я немного нуб. А как это реализовать более грамотно?

[Алексей Уколов]

Что "это"? У вас же уже всё реализовано, просто не парьтесь из-за значения атрибута.

[miniven]

Ну вот ситуация такая, что мне нужно это значение, потому что при нажатии на инпут вылезает кастомный селектбокс. И выбранное значение записывается именно в тот инпут, data-атрибут которого равен selectedId. Вот это я пытаюсь реализовать. Может есть какое-то более грамотное решение?

[Алексей Уколов]

Если сейчас что-то не работает, то, как уже трижды сказали, нужно использовать .attr(), вместо .data(). Если сейчас всё работает как надо, то и пусть работает, ничего не меняйте.

Answer 2

[Алексей Зуев]

Это корректное поведение, data записывается в свойство jquery объекта, метод не перезаписывает атрибут.
Если хотите менять атрибут, то используйте attr

Answer 3

[Александр Косарев]

Data-свойство можно изменить, только если оно было установлено динамически, т.е. тебе достаточно убрать из HTML-кода data-active="0".

Если это не поможет, то через .attr() решать задачу.

Answer 4

[kurtov]

Чтобы значение атрибута и значение jQuery совпадали их надо явно задать (модифицирована последняя строка).

addBtn.click(function(e) {
    e.preventDefault();
    var lastId = $( ".employee:last .select" ).data('active');
    $( ".employee:first" ).clone().appendTo(".generate__section_employee");
    $( ".employee:last input" ).val('');
    $( ".employee:last .select" ).attr('data-active', lastId + 1).data('active', lastId + 1);
  });

Это имеет смысл например, если в другом месте скрипта используется селектор $('[data-active=1') или же для душевного спокойствия.