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

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

你在问题SetSVGBindings中编写它的方式将在SVG加载之前被调用，并且文档中的任何SVG元素都不会被CSS选择器绑定。

Answer 2

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

我不明白为什么它之前没有用，毕竟它是在功能完成后加载的。

非常感谢

附加＆＃39; onclick＆＃39;事件到SVG元素＆＃39; rect＆＃39;装货后

2 个答案: