@miniven

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

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

<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.
В чем проблема?
  • Вопрос задан
  • 3085 просмотров
Решения вопроса 1
alexey-m-ukolov
@alexey-m-ukolov Куратор тега JavaScript
В чем проблема?
В том, что jQuery.data() не обновляет значение атрибута ноды. Если вам нужно, чтобы значение обновлялось, используйте .attr('data-active', selectedId).
Но, скорее всего, вам это не нужно - вы же не читаете в скриптах значение этого атрибута не через jQ?
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
Это корректное поведение, data записывается в свойство jquery объекта, метод не перезаписывает атрибут.
Если хотите менять атрибут, то используйте attr
Ответ написан
Комментировать
jaxtr
@jaxtr
JavaEE/Spring-разработчик
Data-свойство можно изменить, только если оно было установлено динамически, т.е. тебе достаточно убрать из HTML-кода data-active="0".

Если это не поможет, то через .attr() решать задачу.
Ответ написан
Комментировать
kurtov
@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') или же для душевного спокойствия.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
06 дек. 2021, в 09:20
50000 руб./за проект
06 дек. 2021, в 07:23
1000 руб./за проект
06 дек. 2021, в 07:18
1000 руб./за проект