title: mootools - using addEvent to element not working properly?
body: <p>bangin' my head against this and it's starting to hurt.</p>
  
  <p>I'm having trouble with adding an event to an element.
  I'm able to add the event, and then call it immediately with element.fireEvent('click'), but once the element is attached to the DOM, it does not react to the click.</p>
  
  <p>example code:</p>
  
  <pre><code>var el = new Element('strong').setStyle('cursor','pointer');
  el.addEvent('click',function () { alert('hi!'); });
  el.replaces(old_element); // you can assume old_element exists
  el.fireEvent('click'); // alert fires
  </code></pre>
  
  <p>however, once I attach this to the DOM, the element is not reactive to the click. styles stick (cursor is pointer when I mouseover), but no event fires. tried mouseover as well, to no avail.</p>
  
  <p>any clues here? am I missing something basic? I am doing this all over the place, but in this one instance it doesn't work.</p>
  
  <p>EDIT----------------</p>
  
  <p>ok here's some more code. unfortunately I can't expose the real code, as it's for a project that is still under tight wraps.</p>
  
  <p>basically, the  nodes all get picked up as "replaceable", then the json found in the rel="" attribute sets the stage for what it should be replaced by. In this particular instance, the replaced element is a user name that should pop up some info when clicked.</p>
  
  <p>again, if I fire the event directly after attaching it, all is good, but the element does not react to the click once it's attached.</p>
  
  <p>HTML-----------</p>
  
  <pre><code>&lt;p&gt;Example: &lt;span class='_mootpl_' rel="{'text':'foo','tag':'strong','event':'click','action':'MyAction','params':{'var1': 'val1','var2': 'val2'}}"&gt;&lt;/span&gt;&lt;/p&gt;
  </code></pre>
  
  <p>JAVASCRIPT-----
  assumptions:
  1. below two functions are part of a larger class
  2. ROOTELEMENT is set at initialize()
  3. MyAction is defined before any parsing takes place (and is properly handled on the .fireEvent() test)</p>
  
  <pre><code>parseTemplate: function() {
      this.ROOTELEMENT.getElements('span._mootpl_').each(function(el) {
          var _c = JSON.decode(el.get('rel'));
          var new_el = this.get_replace_element(_c); // sets up the base element
          if (_c.hasOwnProperty('event')) {
              new_el = this.attach_event(new_el, _c);
          }
      });
  },
  
  attach_event: function(el, _c) {
      el.store(_c.event+'-action',_c.action);
      el.store('params',_c.params);
      el.addEvent(_c.event, function() {
          eval(this.retrieve('click-action') + '(this);');
      }).setStyle('cursor','pointer');
      return el;
  },
  </code></pre>