[分享]jQuery动态更新SVG后，点击事件为何失效？

<svg id="svg-1" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; display: inline; width: inherit; min-width: inherit; max-width: inherit; height: inherit; min-height: inherit; max-height: inherit;" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events">
<g class="class1"><g role="group" class="class2"><g><g fill="#93c317" class="path1" stroke="#ffffff" stroke-width="1" opacity="1" id="id1"><g><g shape-rendering="auto"><path d="......"></path></g></g></g></g></g></g>
</svg>

$('.class1 .class2 .path1').on("click", function() {  alert('12345'); });

此时点击svg区域会有弹窗显示12345，然后我使用jquery动态更新svg内容：

$('#svg-1').html('<g class="class1"><g role="group" class="class2"><g><g fill="#93c317" class="path1" stroke="#ffffff" stroke-width="1" opacity="1" id="id2"><g><g shape-rendering="auto"><path d="........."></path></g></g></g></g></g></g>');

然后我再点击svg区域却显示没有任何弹窗。

请教为何动态生成的svg内容无法响应点击事件呢？感谢。

我通过console控制台执行如下代码后，再点击svg区域却可以显示12345弹窗:

$('.class1 .class2 .path1').on("click", function() {  alert('12345'); });

使用

$('#svg-1').on("click", '.class1 .class2 .path1', function() {
    alert('12345');
});

仍然没有弹窗显示！