После обновления jquery 1.3.2 до 1.6.4 связанные вещи.attr() перестали работать, что еще может быть сломано?
Я обновил с jquery 1.3.2 до 1.6.4 и обнаружил, что некоторые вещи в существующем коде не работают -
Отключение чего-то -
$(selector).attr("disabled","");
Проверка, установлен ли переключатель или нет -
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
) действительно, потому что в особом случае, когда селектор имеет форму #id
JQuery напрямую звонит getElementById
вместо того, чтобы вызвать Sizzle.
Чтобы ответить на ваше обновление № 4:
Атрибут ID не должен начинаться с цифр
Причина по которой $('#60table')
работает потому, что внутри JQuery, который оптимизирован как document.getElementById('#60table')
который обычно работает в браузерах, под протестом:)
Но когда вы начинаете использовать комбинированное выражение, такое как $('#60table input[...]')
запускается движок Sizzle, который использует более строгие правила для своего запроса.
Надеюсь, это поможет.