title: jQuery SVG-object tag load event
body: <p>I have a page which dynamically adds SVGs to the page via jQuery:</p>
  
  <pre><code>grid.append($('&lt;object&gt;')
  .load(function () {
      // do stuff
      alert('loaded')
  })
  .attr({
      id: 'tile',
      type: 'image/svg+xml',
      width: Math.round(tile_w),
      height: Math.round(tile_h),
      data: 'map/base.svg'
  })
  );
  </code></pre>
  
  <p>I need access to the SVG document (to "push" a variable into the svg script context) but the SVG has to be loaded for that. My problem is that I dont get the load event working. No alert is displayed.</p>
  
  <p>How to do?</p>
  
  <p><strong>Edit:</strong> It seems like jQuery simply prevents to bind a "load" event to a non-image-or-document element, so I just use the "official" addEventListener() function (not supported by stupid IE, but this is no problem for me):</p>
  
  <pre><code>grid.append($('&lt;embed&gt;')
      .attr({
          id: 'tile' + i,
          type: 'image/svg+xml',
          width: Math.round(tile_w),
          height: Math.round(tile_h),
          src: 'map/base.svg'
       })
      .css({
          position: 'absolute',
          left: Math.round(p.x),
          top: Math.round(p.y)
      }).each(function (i){
          this.addEventListener ('load', function (e) {
              alert('loaded')
          })
      })
  );
  </code></pre>