交换两个html元素并在其上保留事件侦听器 [英] Swap two html elements and preserve event listeners on them

问题描述

也有类似的问题，但是所有答案都是只交换内部元素的html元素。

There are similar questions, but all the answers are for swapping html elements only for the content inside.

我需要交换两个div，其中包含很多内容它们（表格，选择框，输入等）。
元素上具有事件侦听器，因此在交换主div之后需要保留它们。

I need to swap two divs, with lots of content in them (tables, select boxes, inputs, etc.). The elements have event listeners on them, so I need to preserve them after swapping the main divs.

我可以使用jQuery 1.5。这样的答案就可以了。

I have access to jQuery 1.5. So answers with it are OK.

推荐答案

要交换两个div而不丢失事件处理程序或不破坏DOM引用，只需移动它们在DOM中。关键是不要更改innerHTML，因为那样会从头开始重新创建新的DOM节点，并且这些DOM对象上的所有先前事件处理程序都会丢失。

To swap two divs without losing event handlers or breaking DOM references, you can just move them in the DOM. The key is NOT to change the innerHTML because that recreates new DOM nodes from scratch and all prior event handlers on those DOM objects are lost.

但是，如果您仅移动DOM元素移至DOM中的新位置，所有事件保持关联，因为仅在不更改DOM元素本身的情况下重新提供DOM元素。

But, if you just move the DOM elements to a new place in the DOM, all events stay attached because the DOM elements are only reparented without changing the DOM elements themselves.

这是一个可以交换的快速函数DOM中的两个元素。只要其中一个不是另一个的子元素，它就可以与任何两个元素一起使用：

Here's a quick function that would swap two elements in the DOM. It should work with any two elements as long as one is not a child of the other:

function swapElements(obj1, obj2) {
    // create marker element and insert it where obj1 is
    var temp = document.createElement("div");
    obj1.parentNode.insertBefore(temp, obj1);

    // move obj1 to right before obj2
    obj2.parentNode.insertBefore(obj1, obj2);

    // move obj2 to right before where obj1 used to be
    temp.parentNode.insertBefore(obj2, temp);

    // remove temporary marker node
    temp.parentNode.removeChild(temp);
}

您可以在这里看到它的工作： http://jsfiddle.net/jfriend00/NThjN/

You can see it work here: http://jsfiddle.net/jfriend00/NThjN/

这是一个无需插入临时元素即可工作的版本：

And here's a version that works without the temporary element inserted:

function swapElements(obj1, obj2) {
    // save the location of obj2
    var parent2 = obj2.parentNode;
    var next2 = obj2.nextSibling;
    // special case for obj1 is the next sibling of obj2
    if (next2 === obj1) {
        // just put obj1 before obj2
        parent2.insertBefore(obj1, obj2);
    } else {
        // insert obj2 right before obj1
        obj1.parentNode.insertBefore(obj2, obj1);

        // now insert obj1 where obj2 was
        if (next2) {
            // if there was an element after obj2, then insert obj1 right before that
            parent2.insertBefore(obj1, next2);
        } else {
            // otherwise, just append as last child
            parent2.appendChild(obj1);
        }
    }
}

工作演示： http://jsfiddle.net/jfriend00/oq92jqrb/

这篇关于交换两个html元素并在其上保留事件侦听器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！