I'm using Prototype to monitor checkboxes, so I can add javascript checks to them. When the tr or td in which the checkbox is located is clicked, the checkbox should be checked.
When you click directly on a checkbox, the onchange event is fired, so you'll get an alert. When the checkbox' value is changed by javascript (when you click on the tr or td), onchange is not fired. Why is onchange not fired when the checkbox is changed indirectly?
This is the javascript I'm using.
Element.observe(window, 'load', function() {
/* If a tr or td is clicked, change the value of the checkbox. */
$$('#results tr').each(function(el) {
el.observe('click', function(e) {
if(!e.target) { e.target = e.srcElement; }
if(e.target.nodeName == 'TD' || e.target.nodeName == 'TR') {
$('compare-product'+this.id).checked = ($('compare-product'+this.id).checked === false) ? true : false;
}
});
});
/* Monitor if the status of a checkbox has changed. */
$$('#results tr td input').each(function(el) {
el.observe('change', function(e) {
alert('!');
}
);
}
);
}
);
I've tested it in Firefox and IE7, both are not working. I'm not looking for a workaround, I'm just curious to know why this doesn't work.