I come into an interesting issue with the code below:
<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>
The issue is when I manually clicked the checkbox, it will print
checked:true
checked:false
checked:true
checked:false
....
but if I trigger the click event with js code like:
$('#test').click()
it will print like
checked:false
checked:true
Sounds like for manually clicking, the checkbox itself would be rendered as checked/unchecked, then trigger the click event.
But, for JS code of .click(), this is not the case.
Is my guess right? Is there any documentation I can refer to for help?
I get:
The
attrmethod is pretty awful (it used to confuse attributes and properties, probably still does), either read the property directly or useprop. It’s far more efficient to write:Anyhow, here’s my former comment:
Probably because jQuery uses it’s own event registration and firing framework that bypasses the DOM methods. When manually clicking the button, you get the DOM sequence of events. When using jQuery, you get jQuery’s sequence of events.