Как обрабатывать программное изменение состояния элемента ввода в JavaScript

StackOverflow https://stackoverflow.com/questions/400181

  •  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;
    };
})();
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top