在元素SVG中使用JavaScript或jQuery单击事件？

Question

I'm creating a web application using SVG, but I have a problem: I need to put an event click on each element comprising the SVG using jQuery. The problem arises when I try to execute the event; it is as if the element is constructed only by points and the event is very unstable. My code is as follows...

<figure id="'+id+'" cod="'+cod+'" class="contentOneDent">
<div class="textDent headDent">'+id+'</div>
    <svg class="figureDent" viewBox="0 0 6598 10423">
     <g id="Capa_x0020_1">
      <path     cod="'+ZONE_C_VESTIBULAR_S+'" class="faceDent dent1 CervicalVestibularS" d="M1113 2675c-314,-318 -631,-637 -958,-958 1118,-2319 5691,-2126 6257,-42l-908 1018c-580,-562 -1354,-906 -2205,-906 -841,0 -1608,336 -2186,888z"/>
      <ellipse  cod="'+ZONE_OCLUSAL+'" class="faceDent dent1 Oclusal" cx="3299" cy="5214" rx="1370" ry="1443"/>
      <path     cod="'+ZONE_C_VESTIBULAR_I+'" class="faceDent dent1 CervicalVestibularI" d="M1111 7751c-314,317 -630,634 -956,955 1118,2319 5691,2126 6257,42l-906 -1016c-580,564 -1355,909 -2207,909 -843,0 -1610,-337 -2188,-890z"/>
      <path     cod="'+ZONE_PALATINA+'" class="faceDent dent1 Palatina" d="M2487 6371c-472,463 -922,921 -1376,1380 578,553 1345,890 2188,890 852,0 1627,-345 2207,-909l-1293 -1450c-465,404 -1156,510 -1726,89z"/>
      <path     cod="'+ZONE_MESIAL+'" class="faceDent dent1 Mesial" d="M2484 6374c-471,462 -920,919 -1373,1377 -655,-627 -1066,-1532 -1066,-2537 0,-1008 413,-1914 1071,-2541l-3 2c454,457 903,914 1374,1377l2 -2c-339,263 -560,686 -560,1164 0,475 218,897 555,1160z"/>
      <path     cod="'+ZONE_DISTAL+'" class="faceDent dent1 Distal" d="M5504 2693c645,626 1049,1524 1049,2521 0,995 -403,1892 -1047,2518l-1290 -1447c278,-264 453,-646 453,-1071 0,-427 -176,-810 -455,-1074l1290 -1447z"/>
      <path     cod="'+ZONE_VESTIBULAR+'" class="faceDent dent1 Vestibular" d="M3299 1787c851,0 1625,344 2205,906l-1291 1448c-465,-405 -1156,-510 -1726,-89 -471,-463 -920,-920 -1374,-1377 578,-552 1345,-888 2186,-888z"/>
     </g>
    </svg>
<figcaption class="textDent footDent"></figcaption>
</figure>

I need to execute a function when I click in the elements with class faceDent.

Does anyone know how I can implement the event correctly?

Answer 1

For dynamically generated html, you can use .on() to trigger events. Assuming you are adding the dynamically generated html to a div with id "dynamicDiv", then the script goes like :

<script>
    $(document).ready(function(){
        $("#dynamicDiv").on("click", ".faceDent", function(){
            // your code goes here
            // $(".faceDent ").attr("fill", "red");
        });
    });
</script>

PS If you are generating the html dynamically in angular js, then you should consider compiling it exclusively.

Documentation for $compile : https://docs.angularjs.org/api/ng/service/ $compile