ロード後に 'onclick'イベントをSVG要素 'rect'に添付する

Question

DIVに異なるSVGをロードしていて、うまく動作しますが、onclickバインディングが機能していません。

ロード後、LoadSVGBindings関数を呼び出してonclickバインディングを設定します。

唯一の方法は、FireFoxでデバッグすることです。 LoadSVGBindings関数で停止した後、再開するとすべて正常に動作します。

//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"); 
    }); 
} 

何がうまくいかないか、正しく動作させる方法がわかりません。

Answer 1

SVGがロードされた後、成功関数でSetSVGBindingsを呼び出す必要があります。

SVGがロードされる前にSetSVGBindingsという質問に書いた方法が呼び出され、CSSセレクタがバインドするためのSVG要素はドキュメントにはありません。ここで

Answer 2

はマイル関数は、以前に動作しなかった理由、それは成功で終了関数の後にロードされたすべての後、私は、正確に理解していない今

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);}, 
     }); 
    } 

です。

多くの感謝