Now that I have some time I will explain the problem in greater detail, it was my fault that I was not clear when I started this thread.
In my first example (http://jsfiddle.net/CBcFn/) the class of the div did not change when the button was pressed, this was merely for illustration. The actual problem is when the database information is loaded the trigger is never fired. I need to go into this a bit deeper, lets backtrack (time warp and those remembering sounds you hear on way to many TV shows). I have a HtmlTable() (ala Mootools). I populate it with data from a database (using an ajax call), this data includes bit fields (true/false). To display the bit field a no-brainer would be use a checkbox, but instead what I did was wrote a class that creates several html elements, wraps them in a span and wires the events for onChnage. For example sake: <span><input id="chk-1-2" type="checkbox" type="display:none;"><div class="checked" style="height:16px;width:16px"></span> This works great, the class wires up the events for each checkbox and sends updates to the parent class. When the user clicks the div it changes its own class as well as the checkboxes value (div.getParent('input')) etc. Now the sticky bit: The database loads the records at any point in the scripts life (it loads the 'A's' when you are editing the 'A's', then you can switch the filter to 'B's on the fly and it loads more etc..) and regenerates the HtmlTable() checkboxes included. In my class I have a method called set, what set does is it hunts down the input element and changes it's checked value. For example sake: document.id('chk-1-2').checked = true; Now I could simply do two lines of code and change the class of the div element as well: document.id('chk-1-2').getElement('div').setStyle('class', 'checked'); But I thought it would be cooler in true event driven style to give the input element an onChange event that would automatically change the div's class when its value was changed. inputEle.addEvent('change', function() { var nxt = this.getElement('div'); if (nxt.get('class') == "checked") { nxt.setStyle('class','unchecked'); } else { nxt.setStyle('class','checked'); } }); thus making it when it sets the checkboxes in the table, it only has to make one call instead of two. I realize this isn't a critical problem, I can get around it easily by just adding another line of code to the script. I just found it interesting that the input boxes change event does not fire when it's checked state is changed (as the name would tend to suggest), but only when there is a physical change such as a click to the element. -----Original Message----- From: [email protected] [mailto:[email protected]] On Behalf Of Sanford Whiteman Sent: Wednesday, December 29, 2010 2:12 PM To: Andraž Kos Subject: Re: [Moo] Event Change > You really should use the "Moo way" of doing things. It will make things a > lot easier in the long run when programs get more complex. Your Moo-ified adjustment doesn't work in IE. onChange doesn't fire in IE until the element is blurred. It's possible to fire blur() manually, then re-focus() to preclude user astonishment... however, that path is unnecessarily cumbersome and best practice from MS is to use (or wrap) click events. Think it's also useful to work frameworkless once in a while (that's the way the original Fiddle was set up, and I know Matthew knows Moo well). Anyway, Moo + cross-browser: http://jsfiddle.net/sanford/CBcFn/5/ -- S.
