Das Ereignis 'onclick' an das SVG-Element 'rect' nach dem Laden anhängen

Question

Ich lade verschiedene SVGs auf einem DIV und es funktioniert gut, aber die Onclick-Bindungen funktionieren nicht.

Nach dem Laden, rufe ich die LoadSVGBindings Funktion, um die onclick Bindungen zu setzen.

Der einzige Weg, es funktioniert, ist das Debuggen auf FireFox. Nach dem Anhalten bei der LoadSVGBindings -Funktion, dann wieder alles funktioniert gut.

//HTML code 
<div id="TheSVG"></div> 


//LoadSVG function 
function LoadSVG(Mode){ 

    $.ajax({ 
     type: "GET", 
     url: 'data/' + Mode + '.svg', 
     dataType: "text", 
     contentType: "charset=UTF-8", 
     success: function(data) { $('#TheSVG').html(data); }, 
     error: function(request, status, error) {alert("Error: " + error);}, 
    }); 

    SetSVGBindings(); 
} 


//Set after loading the SVG 
function SetSVGBindings(){ 

    $('polygon').on('click', function() { 
     alert("polygon"); 
    }); 

    $('rect').on('click', function() { 
     alert("rect"); 
    }); 
} 

Ich kann nicht herausfinden, was falsch läuft oder wie es richtig funktioniert.

Answer 1

Sie müssen SetSVGBindings in der Erfolgsfunktion aufrufen, d. H. Nachdem das SVG geladen wurde.

Die Art, wie Sie es in der Frage SetSVGBindings geschrieben haben, wird aufgerufen, bevor das SVG geladen wurde und es keine SVG-Elemente im Dokument geben wird, an die der CSS-Selektor binden soll. Hier

Answer 2

ist mi Funktion jetzt

function LoadSVG(Modo){ 

     $.ajax({ 
      type: "GET", 
      url: 'Apoyos/bootstrap/data/' + Modo + '.svg', 
      dataType: "text", 
      contentType: "charset=UTF-8", 
      success: function(data) { $('#SVG').html(data); SetSVGBindings();}, 
      error: function(request, status, error) {alert("Error: " + error);}, 
     }); 
    } 

Ich weiß nicht genau verstehen, warum es vorher nicht arbeiten, schließlich wurde es nach der Funktion mit Erfolg abgeschlossen Laden.

Vielen Dank