title: XUL attaching events to anchors added with javascript
body: <p>I'm writing a firefox extension that adds event listeners to all the anchor tags on a page. Essentially I have:</p>
  
  <pre><code>window.addEventListener("load", function() { myExtension.init(); }, false);
  
  var myExtension = {
  
      init: function() {
      var appcontent = document.getElementById("appcontent");  
      if(appcontent)
          appcontent.addEventListener("DOMContentLoaded", myExtension.onPageLoad, true);  
      },
  
      onPageLoad: function(event) {
          var doc = event.originalTarget;
          var anchors = doc.getElementsByTagName("a");
          //attach event listeners
      }
  }
  </code></pre>
  
  <p>This works for most of the tags on the page.  The problem is that tags added with javascript don't get the event listener attached. I've tried redefining createElement:</p>
  
  <pre><code>//in the onPageLoadFunction
  var originalCreateElement = doc.createElement;
  doc.createElement = function(tag) {
      if (tag != "a"){
          return originalCreateElement(tag);
      }
      var anchor = originalCreateElement("a");
      anchor.addEventListener("mouseover", myInterestingFunction, false);
      return anchor;
  }
  </code></pre>
  
  <p>and I've tried adding a DOM insertion listener</p>
  
  <pre><code>//in the onPageLoadFunction
  function nodeInserted(event){;
      addToChildren(event.originalTarget);
  }
  
  function addToChildren(node){
      if (node.hasChildNodes()){
          var nodes = node.childNodes;
          for (var i = 0; i &lt; nodes.length; i++){
              addToChildren(nodes[i]);
          }
      }
      if (node.nodeName == "a"){
          anchorEvent(node); //adds event listeners to node
      }
  }
  
  doc.addEventListener("DOMNodeInserted", nodeInserted, false);
  </code></pre>
  
  <p>but neither work.  How can I get references to these anchor objects so I can add listeners to them?</p>
  
  <p>Thanks</p>