javascript - 加载后将 'onclick' 事件附加到 SVG 元素 'rect'

Question

我在 DIV 上加载不同的 SVG，它工作正常，但 onclick 绑定(bind)不起作用。

加载后，我调用 LoadSVGBindings 函数来设置 onclick 绑定(bind)。

其工作的唯一方法是在 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

您需要在成功函数中调用 SetSVGBindings，即在 SVG 加载后。

您在问题中编写的方式 SetSVGBindings 将在 SVG 加载之前调用，并且文档中不会有任何 SVG 元素可供 CSS 选择器绑定(bind)。