我有一个包含许多元素的 DIV，这些元素都是可点击的。每一个都有自己独特的事件。此 DIV 具有“停靠”模式，当模式切换时，它会显示在页面上的其他位置和布局中。
我必须指出，我的主要目标浏览器是 IE8。当我在 Chrome 上测试时，我在这里面临的许多问题 (SSLLLLLOOOOWWWWW) 都消失了。
我试图使用 $(...).html() 方法将 HTML 内容移动到新位置。这有效，但事件丢失了。我可以使用 .live() 而不是 .bind() 但这会使所有事件响应慢大约 10 倍(记住我在那个 DIV 中有很多元素)。
我尝试的另一件事是只在两个 DIV 中创建内容并将事件绑定(bind)到两者。然后我可以切换主 DIV 可见性。这使得 DOM 创建比以前慢得多(在 Chrome 上仍然是瞬间，但在 IE 上不是)。
我正在寻找“经典”方式(如果存在的话)在页面上执行此内容重定位，同时保持事件完整。
更新 将此停靠操作视为类似于在 Visual Studio 中将 float 窗口停靠到屏幕一侧的操作。
最佳答案
如果您使用的是 jquery 1.4，则可以使用 detach :
The .detach() method is the same as .remove(), except that .detach() keeps all jQuery data associated with the removed elements. This method is useful when removed elements are to be reinserted into the DOM at a later time.
<body>
<div id='container1'>...elements with bound events...</div>
<div id='container2'></div>
</body>
<script>
var divs = $("#container1").children().detach(); // removes the node from the DOM
$("#container2").empty().append(divs);
</script>
如果您希望同时显示两个 div，则使用 clone(true):
var divs = $("#container1").clone(true);
$("#container2").empty().append(divs);
关于 $.fn.live() 太慢:
您可以尝试将“live”修改得更高效一些，这样它就可以像这样工作:
// $.live(selector, context, event, fn);
$.live("a.explode", "div.container", "click", function(){
alert("boom"); return false;
});
这应该做的是将事件类型绑定(bind)到上下文元素，而不是首先查找选择器元素。不知道它对您的情况是否有用，但我认为值得一提。
要加快速度，请使用 mousedown 而不是单击:
$("a").mousedown(function(){
// do stuff...
}).click(function(){return false;});
关于javascript - 在页面上移动大量 HTML 对象并使用 jQuery 重新绑定(bind)事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2247028/