После обновления jquery 1.3.2 до 1.6.4 связанные вещи.attr() перестали работать, что еще может быть сломано?

Я обновил с jquery 1.3.2 до 1.6.4 и обнаружил, что некоторые вещи в существующем коде не работают -

  1. Отключение чего-то -

    $(selector).attr("disabled","");

  2. Проверка, установлен ли переключатель или нет -

    if($(selector).attr('checked'))

Я проверил обратную несовместимость версий 1.4, 1.5 и 1.6 и обнаружил упоминание только о проблеме № 2, но не упомянуло явное упоминание проблемы № 1 выше. Поэтому я боюсь, что, как проблема № 1, я мог бы найти больше проблем с моим существующим кодом. Наверное, я что-то пропустил в разделе "Отображение данных атрибутов данных" http://blog.jquery.com/2011/05/03/jquery-16-released/. Может кто-нибудь объяснить, пожалуйста, то же самое.

Источники - Обновление с jQuery 1.3.2 до jQuery 1.5 (или 1.4)

Обновить

Я все еще немного смущен с соответствующей заменой attr с prop, Я прочитал .prop() vs .attr() и несколько других вопросов. Где бы я ни читал, там говорится, что в большинстве случаев мне нужно это делать. Но каковы случаи меньшинства тогда? Может кто-нибудь привести примеры кода или ситуации? Как мне найти такие случаи в моем существующем коде? Я также прочитал /questions/24269189/prop-protivattr/24269204#24269204 где упоминается, что -

То, с чем вам действительно нужно быть осторожным, это просто не смешивать их использование для одного свойства в вашем приложении.

Нужно ли заменить attr в prop в случае таких линий, которые сейчас работают нормально?

$(selector).attr("id")

Обновление № 2
Предположим, в моем существующем коде у меня есть строки, подобные следующим (которые, я думаю, напрямую влияют на поведение или состояние виджета пользовательского интерфейса), но в настоящее время нет проверки, чтобы проверить, проверен этот элемент или нет

Это там

$(selector).attr("checked","checked"); //setting

Но это не там

if($(selector).attr("checked")) //checking

Должен ли я все еще заменить attr в prop в коде настройки, даже если настройка работает сейчас?

Обновление № 3
Есть ли место, где я могу получить какой-то список атрибутов, которые напрямую влияют на некоторые свойства виджета пользовательского интерфейса? У меня все еще есть путаница, решающая, какие атрибуты заменить attr на prop. Кто-нибудь еще новичок в этой версии jquery чувствует себя так же, или я только один:D?

Обновление № 4
Похоже, что где-то между этими двумя версиями (с 1.3.2 по 1.6.4), jquery сделал выбор элементов более строгим.

подробности
В модуле есть следующий HTML -

<div id="60table">
    <div>
        <input type="CHECKBOX" id="60_1" value="1" name="data[reportsInfo][Campaign][2752]">
        <label for="60_1">23 apr new campaign 1</label>
    </div>
    <div>
        <input type="CHECKBOX" id="60_2" value="1" name="data[reportsInfo][Campaign][2753]">
        <label for="60_2">23 apr new campaign 2</label>
    </div>
    <div>
        <input type="CHECKBOX" id="60_3" value="1" name="data[reportsInfo][Campaign][2707]">
        <label for="60_3">2nd camp added</label>
    </div>
</div>

В jquery 1.3.2 следующее вернуло фактическое количество входов -

$("#60table INPUT[type='checkbox']").length

Но теперь с jquery 1.6.4 вышеприведенное возвращает 0 (обратите внимание, что позиция входов похожа на #60table > div > input, а не прямо на #60table). я должен сделать $("#60table").find("INPUT[type='checkbox']").length чтобы получить правильный номер.

Из-за этого следующий существующий код перестал работать после обновления, хотя я заменил attr с prop -

$("#60table INPUT[type='checkbox']").attr('checked', $("#60").attr("checked")); //I replaced the attr by prop here

Итак, я все еще получаю новые проблемы, когда старый код больше не работает после обновления.

Ввод щедрости
Так как -

  • Логика селектора элементов больше не работает - я не уверен, может ли быть еще несколько кодов, которые не работают. Возьмем пример обновления 4, когда позиция входа #60table > div > inputНеверно ли было выбрать $("#60table INPUT[type='checkbox']"), Если так, есть ли другие распространенные ошибки, которые могут быть в моем проекте, которые могли бы сломаться.

  • Лучшее объяснение того, где все заменить attr на prop - мне нужно более четкое различие между тем, когда использовать prop вместо attr, и еще несколько примеров. Согласно ответу Джона -

Если это напрямую влияет на поведение или состояние виджета пользовательского интерфейса, используйте prop; в противном случае используйте attr.

Где я могу получить какой-то список атрибутов, которые напрямую влияют на некоторые свойства виджета пользовательского интерфейса

2 ответа

Решение

Проблема вообще не связана с отображением в регистр атрибутов данных, а просто связана с развитием API атрибутов / свойств:

В прошлом jQuery не проводил четкой границы между свойствами и атрибутами. Обычно атрибуты DOM представляют состояние информации DOM, полученной из документа, например атрибут value в разметке. Свойства DOM представляют динамическое состояние документа; например, если пользователь щелкает в элементе ввода выше и вводит def, то.prop("значение") равно abcdef, а.attr("значение") остается abc.

В большинстве случаев браузер рассматривает значение атрибута как начальное значение для свойства, но логические атрибуты, такие как флажок или отключен, имеют необычную семантику.

Что касается отсутствия других связанных с этим критических изменений, этого должно быть достаточно для поиска в вашем коде использования attr и заменить на prop надлежащим образом; учитывая как attr как правило, используется большую часть времени, большинство вызовов, как правило, должны быть заменены.

Обновление: давайте определимся соответствующим образом.

Основная идея заключается в том, что элементы имеют атрибуты HTML: <input name="foo" disabled> имеет атрибуты id а также disabled; id имеет значение, в то время как disabled не. Один из этих атрибутов напрямую влияет на свойство виджета пользовательского интерфейса, которое браузер отображает для представления этого элемента (поле ввода отключено в том смысле, что это элемент управления настольного приложения). Так что эмпирическое правило таково:

Если это напрямую влияет на поведение или состояние пользовательского интерфейса, используйте виджет prop; иначе использовать attr,

В приведенном вами примере id является абстрактной величиной, которая напрямую не влияет на поведение или состояние каких-либо элементов; поэтому вы должны продолжать использовать attr для этого.

Обновление 2:

Должен ли я по-прежнему заменить attr на prop в коде настройки, даже если настройка работает сейчас?

Да, вам следует, потому что в документации jQuery так сказано. И, как вы упомянули ранее в вопросе, смешивание prop а также attr может привести к проблемному поведению.

Обновление 3:

Есть ли место, где я могу получить какой-то список атрибутов, которые напрямую влияют на некоторые свойства виджета пользовательского интерфейса? У меня все еще есть путаница, решающая, какие атрибуты заменить attr на prop.

На самом деле, нет. Эмпирическое правило, которое применимо здесь, заключается в том, что если что-то является логическим значением, то prop скорее всего, правильный способ получить к нему доступ.

Обновление 4:

Похоже, что где-то между этими двумя версиями (с 1.3.2 по 1.6.4), jquery сделал выбор элементов более строгим.

На самом деле Sizzle отвечает за сопоставление совпадающих элементов из селекторов ( jQuery поставляется со встроенным Sizzle). Я не знаю, какие изменения ответственны за измененное поведение, но виновник - это ваш id который начинается с числа. Это недопустимый HTML 4.01, но по какой-то причине это имеет значение и для Sizzle. Обходной путь прост: не начинайте id с цифрой.

Другой обходной путь, который вы обнаружили (разбить селектор на две части и использовать .find) действительно, потому что в особом случае, когда селектор имеет форму #idJQuery напрямую звонит getElementById вместо того, чтобы вызвать Sizzle.

Чтобы ответить на ваше обновление № 4:

Атрибут ID не должен начинаться с цифр

Причина по которой $('#60table') работает потому, что внутри JQuery, который оптимизирован как document.getElementById('#60table') который обычно работает в браузерах, под протестом:)

Но когда вы начинаете использовать комбинированное выражение, такое как $('#60table input[...]') запускается движок Sizzle, который использует более строгие правила для своего запроса.

Надеюсь, это поможет.

Другие вопросы по тегам