Я пытаюсь отслеживать изменения в поле выбора (или вложенных option
элементов )с новой функцией Mutation Observer . Однако только «setAttribute» вызывает у меня обратный вызов наблюдателя мутаций.
Вот код, который я использую:
~function(doc, $) {
var select = $('select');
// http://www.w3.org/TR/dom/#mutation-observers
var observer = new WebKitMutationObserver(function(mutations) {
alert(mutations.length + " mutations happened");
});
observer.observe(select, {
// monitor descendant elements – changing `selected` attr on options
subtree: true,
attributes: true
});
// this triggers Observer's reaction, but doesn't update select box UI
select.setAttribute('value', 'whee');
// this updates select box UI, but doesn't trigger mutation observer's callback
select.value = "whee";
// this also updates the UI, but doesn't trigger mutation observer's callback
select.getElementsByTagName('option')[0].selected = true;
//
// neither does manual selecting of options trigger mutation observer unfortunately :(
button.addEventListener('click', function(e) {
e.preventDefault();
// my goal is to react to this change here
select.value = Math.random() >.5 ? "whee" : "whoa";
}, false);
}(document, function(selector) { return document.querySelector(selector); });
И вот этот код в действииhttp://jsfiddle.net/gryzzly/wqHn5/
Я хотел бы реагировать на изменения атрибутов(selected
в или
value
в ), любые предложения о том, почему наблюдатель не реагирует это более чем приветствуется!
Я тестирую это в Chrome 18.0.1025.168 на Mac OS X. Рабочий код, конечно, также будет иметь префикс moz
для конструктора и версии без префикса, это тестовый код.
УПД.
Код также тестировался в Firefox Nightly, и он ведет себя так же, как в Chrome, а также в Chrome Canary. Я исправил ошибку для обоих браузеров.:
Пожалуйста, прокомментируйте и проголосуйте за эти ошибки, если вас также раздражает эта проблема.