更改了DOM元素标记，脚本不再有效

Question

我目前有一些代码，用动画显示一些文字，当用户将鼠标悬停在它上面时，音频会播放。

但是我添加了一个允许用户更改元素类型的功能。此时的代码将元素从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标签。

Answer 1

我认为当您使用不同的标记名称更改或重新插入对象时，javascript会丢失对您的对象的引用。解决此问题的一种简单方法是在分配mouseenter操作处理程序时使用delegation。

$('body').on('mouseenter', '#text-1', function(){
// your mouseenter functions
});

基本上，当在父元素上发生mouseenter动作时（我在本例中选择了body元素），它会检查事件是否发生在第二个参数中提供的元素上（＆＃39; #text＆＃39;在这种情况下）。只要您的父元素保留在页面上，即使使用相同的选择器销毁/重新插入元素，您的处理程序也应该起作用。

或者，您可以在replaceWith函数之后使用回调函数将mouseenter行为重新分配给新元素。

编辑：如果你提供一个工作小提琴，我们可以更好地帮助调试你的脚本！