Question

我遇到了删除/追加元素的问题 - 然后丢失了他们的事件处理程序。所以 - 元素被克隆并附加在mousenter上（它保留所有事件处理程序）。然后我使用.detach（）删除原始文件以停止复制，据我所知，假定以保留事件监听器，但这不是我所看到的。

$("#containerSVG").on("mouseenter", "g", function(e){
    $(this).clone(true).appendTo("#containerSVG");
    $(this).detach();
});

$("#containerSVG").on("mouseleave", "g", function(){
    console.log("mouse leave triggered");
});

这是一个显示问题的小提琴https://jsfiddle.net/6m54ttLe/6/。如果我删除了detach（），那么mouseleave会被触发，当使用detach（）时，它根本不被触发。

所有建议都非常感谢！

更新我需要使用clone（）而不仅仅是appendTo（）的原因是因为IE和EDGE完全失去了事件处理程序（即使Chrome和其他不错的浏览器没有）。这是另一篇讨论同一问题的文章。我没有使用d3（并且没有时间为这个项目学习它）所以他们谈论的解决方案不适用SVG element loses event handlers if moved around the DOM

更新2 我还没有找到解决这个问题的方法。很想找到一个！但是我找到了一个解决方法，将每个路径放在一个单独的SVG中，而不是＆lt; g＆gt;然后我可以使用css z-index将悬停的一个带到前面。只是想我会添加，以防其他人有类似的问题。

Answer 1

您实际上并不需要克隆该元素：您只需要执行$(this).appendTo(...)，这样就可以移动所选节点并将其附加到您想要的任何目标上。考虑到这一点，以下代码将解决您的问题：

$("#containerSVG").on("mouseenter", "g", function(e) {
  $(this).appendTo("#containerSVG");
});
$("#containerSVG").on("mouseleave", "g", function() {
  console.log('mouseleave');
});

请参阅概念验证小提琴：https://jsfiddle.net/teddyrised/6m54ttLe/20/，或查看以下代码段：

$("#containerSVG").on("mouseenter", "g", function(e) {
  $(this).appendTo("#containerSVG");
});
$("#containerSVG").on("mouseleave", "g", function() {
  console.log('mouseleave');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg id="containerSVG" xmlns="http://www.w3.org/2000/svg" width="340" height="340" viewBox="0 0 340 340">
<g><path fill="#cc0000" d="M170,170 L170,0 A170,170 0 1,1 8.32039222982391, 117.46711095625892 z" transform="rotate(0, 170, 170)"></path></g>
<g>
		<path fill="#000000" d="M154,154 L154,0 A154,154 0 0,1 297.18557882679073, 97.30881888655958 z" transform="rotate(0, 154, 154)"></path><path fill="#000000" d="M154,154 L154,0 A154,154 0 0,1 192.29824262338764, 4.838193186190701 z" transform="rotate(68.4, 154, 154)"></path><path fill="#000000" d="M154,154 L154,0 A154,154 0 0,1 252.16329442129822, 35.34096061252849 z" transform="rotate(82.80000000000001, 154, 154)"></path><path fill="#000000" d="M154,154 L154,0 A154,154 0 0,1 306.7856640024296, 134.69868203109712 z" transform="rotate(122.4, 154, 154)"></path></g>
	</svg>

JQuery - SVG路径克隆和追加 - 丢失事件监听器

1 个答案: