在加載後將'onclick'事件附加到SVG元素'rect'

我在DIV上加載了不同的SVG，它工作正常，但onclick綁定不起作用。在加載後將'onclick'事件附加到SVG元素'rect'

加載後，我調用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"); 
    }); 
}

我找不出什麼問題或如何使它正常工作。

來源

2016-08-18 TresRRR

我簡直不敢相信！ – TresRRR

它就像一個魅力。 – TresRRR

您需要在成功函數中調用SetSVGBindings，即在SVG加載後。

您在問題中編寫SetSVGBindings的方式將在SVG加載之前調用，並且文檔中不會有任何SVG元素供CSS選擇器綁定。

來源

2016-08-18 20:53:38

這裏是MI功能現在

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

我不明白究竟爲什麼沒有工作之前，畢竟它是成功完成了功能之後加載。

非常感謝

來源

2016-08-18 21:00:47 TresRRR

'在成功完成功能後加載完畢後，**不是**。 '$ .ajax'是*異步*，它不會阻塞，腳本繼續運行，在'$ .ajax'完成之前調用'SetSVGBindings'。 – Mark

在加載後將'onclick'事件附加到SVG元素'rect'

回答

相關問題