在元素 SVG 中使用 JavaScript 或 jQuery 进行事件点击？答案

【问题标题】：Event click with JavaScript or jQuery in element SVG?在元素 SVG 中使用 JavaScript 或 jQuery 进行事件点击？
【发布时间】：2016-04-21 09:26:03
【问题描述】：

我正在使用 SVG 创建一个 Web 应用程序，但我遇到了一个问题：我需要使用 jQuery 在包含 SVG 的每个元素上单击事件。当我尝试执行事件时出现问题；就好像元素仅由点构成，并且事件非常不稳定。我的代码如下...

<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>

当我单击具有类 faceDent 的元素时，我需要执行一个函数。

有谁知道我怎样才能正确实现这个事件？

【问题讨论】：

你能创建一个小提琴吗？ jsfiddle.net
请在问题本身中包含相关代码（即您用于添加事件处理程序的代码）。您可以使用 Stack Snippets（看起来像带有尖括号的页面的按钮）在可运行的 sn-p 中组织您的代码。

标签： javascript jquery html svg

【解决方案1】：

对于动态生成的 html，可以使用 .on() 来触发事件。假设您将动态生成的 html 添加到 id 为“dynamicDiv”的 div，那么脚本如下：

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

附：如果您是在 Angular js 中动态生成 html，那么您应该考虑专门编译它。

$compile 的文档：https://docs.angularjs.org/api/ng/service/$compile

【讨论】：

你好，我是这样尝试的，但是事件运行不正确，有时如果有的没有，你需要点击很多才能触发事件。
你在使用 Angular js 吗？
我对代码做了一些小改动，大家可以试试。即使使用动态生成的代码，它也应该可以正常工作。
我不使用 Angular，只使用 Jquery。
很高兴能帮上忙.. :)