Почему событие click не запускается в моей группе SVG?

Question

У меня есть файл svg (карта мира) с путем s, которые формируют каждую страну, которые сами сгруппированы в элементы g , которые представляют континенты - структурированы следующим образом:

<svg id="worldmap" viewBox="100 0 8334 4171">
  <g id="Asia" class="wm-cont">
    <path id="AF" d="M5707.92,1390.83l-22.5, etc...
    ...

Я хотел бы увеличить масштаб континента после щелчка, поэтому я написал следующее jQuery для Азии:

$(document).ready(function() {
    $("#Asia").click(function() {

        // hide all continents
        $(".wm-cont").css("display", "none");

        // show Asia
        $("g.wm-cont#Asia").fadeIn();

        // shift the continent into view
        $("g.wm-cont#Asia").setAttribute("transform", "translate(-400,439) scale(0.032,-0.032");
    });
});

.. .. но я нажимаю и ничего не происходит. Почему нет? Я попытался изменить свои селекторы на g # Asia и аналогичные, но ничего не изменилось.

Любая помощь с этим была бы очень признательна.

---

Обновление

Для почему-то теперь это сработало:

$(document).on('click', '#Asia', function() {
    alert("Asia");
});

... хотя я ничего не менял в структуре svg. Любые идеи о том, почему это работает, тепло приветствуются: -)

Answer 1

Элемент g - это просто пустой контейнер; он не может запускать события самостоятельно. введите rect в свой g и попробуйте

 <rect x="0" y="0" width="100" fill= "white" height="100"></rect>

пример демонстрации

document.querySelector("#Asia").addEventListener("click", () => alert("clicked"))

<svg width="300" height="300">
  <g id="Asia">
    <rect x="0" y="0" width="100" fill= "gray" height="100"></rect>
  </g>
</svg>