Question

我在下面的代码中遇到了一个有趣的问题：

<html>
<head>
    <meta charset="UTF-8"/>
    <script src="jquery-1.3.2.min.cache.js">
    </script>
    <script>
        $(function(){
        var c = function(){
                  console.log('checked:' + $('#test').attr('checked'));
                };
        $('#test').click(c);
    });
    </script>
</head>

<body>
    <input id="test" type="checkbox" value="1">test
  </input>
</body>
</html>

问题是当我手动点击复选框时，它会打印

checked:true
checked:false
checked:true
checked:false 
....

但如果我用js代码触发click事件，如：

$('#test').click()

它会打印出像

checked:false
checked:true

听起来像是手动点击，复选框本身会呈现为选中/取消选中，然后触发点击事件。

但是，对于.click()的JS代码，情况并非如此。

我猜对了吗？有没有我可以参考的文件求助？

Answer 1

问题是当我手动点击复选框时，它会打印

检查：真   检查：假

我明白了：

> checked:true
> checked:undefined

attr方法非常糟糕（它常常会混淆属性和属性，可能仍然存在），要么直接读取属性，要么使用prop。写作效率更高：

   console.log('checked:' + this.checked);

无论如何，这是我以前的评论：

可能是因为jQuery使用它自己的事件注册和触发框架来绕过DOM方法。手动单击按钮时，您将获得DOM事件序列。使用jQuery时，您将获得jQuery的事件序列。

复选框单击事件执行顺序并呈现

1 个答案: