javascript - 交换两个 html 元素并保留它们的事件监听器

Question

有类似的问题，但所有答案都是为了仅将 html 元素交换为里面的内容。

我需要交换两个 div，其中有很多内容(表格、选择框、输入等)。这些元素上有事件监听器，因此我需要在交换主 div 后保留它们。

我可以访问 jQuery 1.5。所以用它来回答就可以了。

Answer 1

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

但是，如果您只是将 DOM 元素移动到 DOM 中的新位置，所有事件都会保持附加状态，因为 DOM 元素只会重新设置父级，而不会更改 DOM 元素本身。

这是一个快速函数，可以交换 DOM 中的两个元素。它应该适用于任何两个元素，只要一个元素不是另一个元素的子元素:

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/

<小时/>

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

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/