Не удается сделать событие click на элементе пути SVG

Question

У меня есть сценарий, который генерирует карту с цветами на ней. Я пытаюсь, чтобы событие произошло, когда я нажимаю на одно из состояний - это использование jvectormap.

Однако по какой-либо причине это не работает. Я пытаюсь использовать другие элементы, и событие click отлично работает. Как получить событие click для работы с элементом пути?

$(function() { 
    var generateColors = function() { 
     var colors = {}, 
      key; 
     for (key in map.regions) { 
      values.green.forEach(function(item, i) { 
      colors[item] = "#2eb02e"; 
      }); 
      values.red.forEach(function(item, i) { 
      colors[item] = "#ba0707"; 
      }); 
      values.yellow.forEach(function(item, i) { 
      colors[item] = "#d2d207"; 
      }); 
     } 
     return colors; 
    }, 
    map = new jvm.Map({ 
      map: 'us_lcc_en', 
      container: $('#map'), 
      series: { 
        regions: [{ 
         attribute: 'fill' 
        }] 
       } 
      }); 
    map.series.regions[0].setValues(generateColors()); 
}); 

И:

$("path").click(function() { 
    console.log("blah blah blah"); 
}); 

Предпочтительно раствор будет использовать JQuery.

Answer 1

Возможно, это связано с тем, что при импорте его разметка svg еще не загружается на страницу, поэтому она не может прикреплять события к элементам пути.

Что вам нужно сделать, так это прикрепить событие загрузки к объекту, который при запуске будет прикреплен к вашим событиям щелчка после его загрузки.

Вы можете сделать это

$(document).on('click','path',function(){ 
     alert('You clicked me'); 
     //Do the stuff 
}); 

Или

<script> 
     var a = document.getElementById("somesvg"); 
     //it's important to add an load event listener to the object, as it will load the svg doc asynchronously 
     a.addEventListener("load",function(){ 
      var svgDoc = a.contentDocument; //get the inner DOM of some.svg 
      var delta = svgDoc.getElementById("delta"); //get the inner element by id 
      delta.addEventListener("mousedown",function(){alert('hello world!')},false); //add behaviour 
     },false); 
</script> 

Примечание - Обратите внимание, что ограничение этого метода является то, что она ограничена политикой одного источника, так что некоторые из них. svg должен размещаться в том же домене, что и html-файл, иначе внутренняя DOM объекта будет недоступна.