Как обрабатывать программное изменение состояния элемента ввода в JavaScript
-
03-07-2019 - |
Вопрос
Я столкнулся со странной проблемой.В то время как пользовательское изменение элемента ввода флажка в форме приводит к адекватному событию, программные изменения этого не делают.Как мне справиться с этой проблемой?Код следующий:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>
<script type="text/javascript">
jQuery(document).ready(
function() {
jQuery("#cb").change(
function() {
alert("Changed!");
return true;
}
);
jQuery("#b").click(
function() {
var newState = !jQuery("#cb").attr('checked');
jQuery("#cb").attr('checked', newState);
});
});
</script>
</head>
<body>
<form action="#">
<p>
<input type="button" id="b" />
<input type="checkbox" id="cb" />
</p>
</form>
</body>
</html>
ОбновлятьЯ не контролирую изменения элементов, мне просто нужно их обрабатывать.Я пишу код общего назначения.
Решение 4
Невозможно отслеживать состояние объекта на языке JavaScript, как это можно сделать в Objective-C (KVO).Также невозможно использовать функции DOM — DOM не генерирует события при каждом изменении свойства — вместо этого он генерирует события только при определенных действиях пользователя:щелчки мыши, нажатия клавиш или жизненный цикл страницы и их производные.
Этого единственного события можно было бы добиться каждый раз, когда она изменяет какое-либо свойство.Конечно, это можно было бы инкапсулировать в функцию, как упомянул AnthonyWJones.
Другие советы
используйте функцию триггера, чтобы вызвать событие щелчка по флажку.Вам не нужно будет захватывать существующее состояние, поскольку флажок будет просто переключен щелчком мыши.
jQuery("#cb").trigger('click');
В этом случае вам не следует кодировать логику в самой функции обработчика событий.Любую такую логику следует поместить в отдельную функцию.Точно так же вы не должны размещать код, который программно манипулирует значениями флажков непосредственно в других последовательностях кода, а абстрагируете его в другую функцию:
jQuery(document).ready(
function() {
jQuery("#cb").change(
function() {
changeLogicForcb.call(this);
return true;
}
);
jQuery("#b").click(
function() {
togglecb();
});
function changeLogicForcb()
{
//something actually sensible here
alert("changed!");
}
function togglecb()
{
var cb = jQuery("#cb");
var newState = !cb.attr('checked');
cb.attr('checked', newState);
changeLogicForcb.call(cb.get(0));
}
});
Метод основной библиотеки jQuery .val() не запускает событие изменения.Если вы используете собственную копию jQuery, вы можете изменить метод библиотеки, но это, вероятно, будет неразумно.Вместо этого вы можете добавить свой собственный метод установки значений, который использует .val(), а также запускает событие изменения с чем-то вроде следующих строк:
jQuery.fn.xVal = (function() {
return function(value) {
// Use core functionality
result = this.val.apply(this, arguments);
// trigger change event
if (result instanceof jQuery) {
result.change();
}
return result;
};
})();