2012-08-26 7 views
9

Tengo una página que añade dinámicamente IVS a la página a través de jQuery:jQuery SVG-objeto de evento de carga etiqueta

grid.append($('<object>') 
.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' 
}) 
); 

Necesito acceso al documento SVG (para "empujar" una variable en el contexto de la escritura SVG) pero el SVG tiene que ser cargado para eso. Mi problema es que no funciona el evento de carga. No se muestra ninguna alerta.

¿Cómo hacer?

Editar: Parece como jQuery simplemente impide a enlazar un evento de "carga" a un elemento no-imagen-o-documento, por lo que sólo tiene que utilizar la función addEventListener "oficial"() (no admitida por estúpida IE , pero esto no es problema para mí):

grid.append($('<embed>') 
    .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') 
     }) 
    }) 
); 

Respuesta

-1

no sé lo que es grid en su ejemplo, pero si se trata de un elemento DOM normal, entonces la llamada a la API load debe ser del formato definido en la API docs. Actualmente parece que estás intentando cargar una llamada de función que no tiene ningún sentido.

.load(url [, data] [, complete(responseText, textStatus, XMLHttpRequest)]) 

por lo

grid.append($('<object>').load('image.svg', 
    function (response, status, xhr) { 
     if (status == 'success') { 
      // yay the load is ok 
      alert('loaded'); 
     } 
    }) 
); 

http://api.jquery.com/load/

ACTUALIZACIÓN: No he probado lodaing datos SVG en el navegador HTML, pero con la documentación del W3C no hablar de que la etiqueta <object> podría utilizarse para eso. Su ejemplo se utiliza <embed>

<embed src="circle1.svg" type="image/svg+xml" /> 

han intentado utilizar que en lugar de <object>?

ACTUALIZACIÓN 2:

No creo que la solución anterior funciona bien, ya que el evento onload JS es apoyado por las siguientes etiquetas <body>, <frame>, <frameset>, iframe, <img>, <input type="image">, <link>, <script>, <style> - Supongo que esto es lo que jQuery es conectar en, por lo tanto, Solo funcionaré para esos elementos. Los documentos jQuery dicen que el controlador de eventos es compatible con images, scripts, frames, iframes y el objeto window.

De hecho, si eso no funciona, entonces supongo que solo tendrá que utilizar la llamada al método .load() y manejar los resultados. Tal vez puedas colocar las etiquetas svg embed en archivos html separados, o tener un script que genere las incrustaciones html.

http://www.w3schools.com/jsref/event_onload.asp

Actualización 3:

Habría que parecen ser al menos dos soluciones correctas a este problema.

  1. jQuery plugin de SVG http://keith-wood.name/svg.html

  2. una llamada jQuery ajax() detallan here incluyendo información acerca de la interacción con el lienzo SVG después de la carga.

+0

Como me parece que está tratando de usar 'load' no como una función' ajax' sino simplemente como un controlador de eventos DOM'load'. Hay muchas preguntas sobre SO relacionadas con la carga DOM y el elemento de objeto – user907860

+0

Hm, quiero el evento load pero la llamada ajax http://api.jquery.com/load-event/ – Euro

+0

La pregunta http: // stackoverflow.com/questions/5926424 es sobre el mismo problema pero no proporciona una solución. – Euro

Cuestiones relacionadas