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

Question

<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');
});

仍然没有弹窗显示！

Answer 1

因为你之前的事件是绑定在path1上的，新增的元素虽然class也是path1，但已经不是同一个元素了。

对于这种情况，通常使用冒泡的原理，把事件绑定在上级不被移除的元素上，比如$('#svg-1').on('click', '.class1 .class2 .path1', function(){...})

Answer 2

动态更新html后，原先元素上绑定的事件随着原先元素的更新失效了，对新更新的元素重新绑定一次即可：

$('#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>');
$('.class1 .class2 .path1').on("click", function() {  alert('12345'); });