Question

我遇到了奇怪的问题。用户在表单上更改复选框输入元素时会产生足够的事件编程更改。我该如何应对这一挑战？代码如下：

<!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>

更新我不控制元素更改，我只需要处理它们。这是我写的一般建议代码。

Answer 1

使用触发器功能触发复选框上的单击事件。您不需要获取现有状态，因为只需通过单击切换复选框。

jQuery("#cb").trigger('click');

Answer 2

在这种情况下，您不应该在事件处理函数本身中编写逻辑。您应该将任何此类逻辑放在单独的函数中。类似地，您不应该将编码复选框的代码直接放在其他代码序列中，而是将其抽象为另一个函数： -

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));         
    }  

  });

Answer 3

jQuery核心库方法.val（）不会触发change事件。如果你提供自己的jQuery副本，你可以修改库方法，但这可能不明智。相反，您可以添加自己的值设置器，利用.val（），同时还使用以下内容触发change事件：

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;
    };
})();

Answer 4

在javascript语言中跟踪对象的状态是不可能的，因为它可以在Objective-C（KVO）中完成。也不可能使用DOM功能 - DOM不会在每次更改属性时触发事件 - 而只会触发某些用户操作上的事件：鼠标单击，按键或页面生命周期及其衍生物。

每次修改某些财产时，人们都可以实现这一点。当然，这可以封装在AnthonyWJones提到的函数中。

如何在javascript中处理输入元素状态的程序化更改

4 个答案: