Обновление значений данных в DOM, но не в функции

#javascript #jquery #dom

Вопрос:

Я изменяю текст кнопки на основе выбора пользователем.

 $(".someClass").click(function() {
    $("#someID_1").text($(this).prop("innerHTML"));
    $("#someID_1").attr("data-value", $(this).data("value"));

    someFunction("someID_1");
});

Затем я хочу вызвать функцию someFunction .

 function someFunction(someID) {
    console.log(parseInt($("#"   someID).data("value")))
    if ( parseInt($("#"   someID).data("value")) !== 10 ) {
        // do something
    } else {
        // do something else
    }
}

Происходит то, что console.log отображает при самом первом вызове функции (таким образом, при самом первом щелчке) data-value выделение. Однако, когда я выбираю что-то новое и функция выполняется снова, data-value график через console.log остается неизменным. Глядя на DOM , data-value обновляется, хотя.

Почему это?

Ответ №1:

Поскольку .data() используется только внутренний кэш, он использует атрибут data только в качестве значения по умолчанию, и обновление атрибута не влияет на него,

Вам нужно использовать .data(key, value) для установки значения. Если вам нужно обновить DOM, используйте .attr()

 $("#someID_1").data("value", $(this).data("value"));

Если вы используете attr() для получения и установки, вы получите обновленное значение. То, что вы не должны использовать, — это сочетание attr() и data() . И если у вас нет реальной причины обновлять атрибут, используйте data() для получения и установки значения.

1. data-value Обновляется. Я вижу это в своем DOM

2. @Stophface, .data() использует значение атрибута только для значения по умолчанию, если вы обновляете атрибут, то он никогда не используется

3. @Stophface Если вы хотите обновить атрибут, используйте jQuery attr() для получения и установки. Теперь, чтобы добавить больше путаницы, чтобы действительно обновить атрибут данных и объект, вы должны использовать: dataset . Установить: $("#someID_1")[0].dataset.value = 666; и получить: $("#someID_1")[0].dataset.value и простить за jQuery $.fn.data , который, как вы можете видеть, может быть довольно запутанным. Вы можете сравнить довольно неожиданный результат между этим jsFiddle и этим

4. @Stophface When I update it again, it stays the same Если вы используете attr() для получения и установки, нет, вы получите обновленное значение. То, что вы не должны использовать, — это сочетание attr() и data() . И если у вас нет реальной причины обновлять атрибут, используйте data() для получения и установки значения. Какой предпочтительный метод действительно зависит от вашего реального варианта использования

5. @Stophface, этого не должно быть, если вы настраиваете using, $("#someID_1").attr("data-value", $(this).data("value")); затем используйте $("#someID_1").attr("data-value"); для его извлечения

Ответ №2:

Попробуйте

 $(document).on('click', ".someClass", function()
   {
       //your event logic
   }