Firefox Inspector, Firebug & Webkit Инструменты разработчика (Chrome/Safari), не обновляющие HTML, чтобы отображать проверенные состояния флажков, загружаемых через AJAX

Question

Это абсолютно baffling для меня как опытного разработчика UX.

У меня есть контент, загружаемый через запрос AJAX, инициированный, когда пользователь проверяет поле в начале неупорядоченного списка. Когда флажок установлен, список заполняется элементами списка, каждый из которых содержит свои собственные флажки, которые по умолчанию указывают «проверено».

С этого момента, если я щелкнул правой кнопкой мыши флажки и «Проверить элемент», результаты довольно странные. При проверке или снятии флажка самого верхнего окна результаты выглядят так, как ожидалось: флажок установлен или снят, а в инспекторе это отражается в HTML. Поэтому при проверке создается новый атрибут (checked = "checked"), и состояние отражает то, что видно в HTML внутри самой страницы.

Для этих флажков, которые были загружены через AJAX, результаты НЕ являются простыми (или правильными). Можно проверить и снять флажки в списке, а при отправке формы результаты будут точными. При вычислении на лету с использованием jQuery или обычного JavaScript значения этих флажков сообщаются точно.

Однако в Chrome Developer Tools или в Firefox Document Inspector или Firebug HTML для этих недавно загруженных ящиков не является точным. Они загружаются в том же состоянии, что и ожидалось (т. Е. Все они загружаются с включенным состоянием, например, checked = "checked" во всех случаях). Тем не менее, при изменении состояния через окно браузера HTML в инспекторе НЕ обновляется. Обратное также верно: при обновлении HTML внутри окна Inspector окно браузера не обновляется.

Хотя я не уверен, что это имеет отношение к проблеме, я включу его на всякий случай: этот список также содержится в аккордеоне Bootstrap (который по умолчанию находится в «свернутом ", но расширяется по мере загрузки содержимого через AJAX для обеспечения жидкостного UX-опыта).

Я тестировал это до сих пор на Windows и Mac OSX Mountain Lion, используя Google Chrome, Mozilla Firefox и Apple Safari. Результаты во всех случаях согласуются. Я не могу понять, почему это произойдет так. Любые отзывы приветствуются.

Последнее примечание: из-за запроса AJAX, участвующего в этом процессе, и потому, что сервер, обеспечивающий требуемый ответ, находится за брандмауэром (так как это сайт на основе подписки, над которым я работаю) я не уверен, что могу привести пример этого через JS Fiddle. Если, однако, у кого-то есть информация о том, как это может работать, я открыт для предложения и буду рад представить пример этой неприятной ошибки.

---

UPDATE:

я заметил, глядя на документацию API JQuery в http://api.jquery.com/prop/, что спецификации W3C для галочки указывает, что «проверенное значение атрибута не изменяется с состоянием флажка , в то время как проверенное свойство имеет значение ". Таким образом, это может быть частичное объяснение того, что происходит здесь. Однако он не объясняет, почему изменение атрибута на загружаемом без AJAX содержимом приводит к тому, что страница отражает измененное состояние и наоборот.

Answer 1

После тщательного рассмотрения стандартов W3C, связанных с этой проблемой, кажется очевидным, что это ошибка браузера (хотя и не серьезная).Расхождение существует, потому что используемый не-AJAX-метод, по-видимому, выбран более «дружественным» и поддерживает согласованность между кодом и представлением, тогда как метод AJAX более уважает истинную спецификацию W3C. Это результат любых совместных усилий в области развития.

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

$('#some-id').prop('checked', true); // Preferred method for checking a box or radio button 

... вместо:

/* DON'T USE THIS CODE! 
$('#some-id').attr('checked', 'checked'); // Deprecated method for checking a box or radio button 
IF YOU DO, IT'S ON YOU. */