<分区>
javascript - 更改了 DOM 元素标签，脚本不再有效
标签 javascript jquery html css
我目前有一些代码可以显示一些带动画的文本，当用户将鼠标悬停在它上面时会播放音频。
不过，我正在添加一项允许用户更改元素类型的功能。下面的代码目前将一个元素从 H1 更改为 P。
除了检测用户是否已将鼠标悬停在元素上的脚本似乎不再起作用外，一切正常。我认为这有点不对劲，因为该元素仍然保持相同的 ID。
是否有 JS 原因导致音频脚本不再有效或我错过了一些明显的东西？
谢谢!
之前:
检测变化
$("#editTextTag").change(function(){
var id = "#"+$("#editTextId").val();
var iframe = $('#clientframe');
var tag = $("#editTextTag").val();
var element = $(id, iframe.contents());
var elementcopy = $(element).clone();
var attrs = { };
$.each($(element)[0].attributes, function(idx, attr) {
attrs[attr.nodeName] = attr.nodeValue;
});
$(element).replaceWith(function () {
return $("<p/>", attrs).append($(this).contents());
});
});
目前将 h1 标签更改为 p 标签。
最佳答案
我认为当您更改或重新插入具有不同标签名称的对象时，javascript 会丢失对您的对象的引用。一个简单的解决方法是使用 delegation在分配您的 mouseenter 操作处理程序时。
$('body').on('mouseenter', '#text-1', function(){
// your mouseenter functions
});
基本上，当 mouseenter 操作发生在父元素上时(我在本例中选择了 body 元素)，它会检查事件是否发生在第二个参数('#text')中提供的元素上在这种情况下)。只要您的父元素保留在页面上，即使您销毁/重新插入具有相同选择器的元素，您的处理程序也应该起作用。
或者，您可以在 replaceWith 函数之后使用回调函数，将 mouseenter 行为重新分配给新元素。
编辑:如果您提供可用的 fiddle ，我们可以更好地帮助调试您的脚本!
关于javascript - 更改了 DOM 元素标签，脚本不再有效，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36117048/