Question

我有一个DIV，其中包含许多可点击的元素。每个人都有自己独特的活动。当切换模式时，此DIV具有“停靠”模式，在该模式下，它显示在页面上的某些其他位置和布局中。

我必须注意我的主要目标浏览器是IE8。我在Chrome上测试时遇到的许多问题（SSSLLLLLOOOOWWWWW）都消失了。

我尝试使用 $（...）。html（）方法将HTML内容移动到新位置。这有效，但事件丢失了。我可以使用 .live（）而不是 .bind（），但这会使所有事件响应慢10倍（请记住我在DIV中有很多元素）。

我尝试的另一件事是在两个DIV中创建内容并将事件绑定到两者。然后我可以切换主DIV可见性。这使得DOM创建比以前慢得多（在Chrome上仍然是一个瞬间，但在IE上却没有）。

我正在寻找“经典”方式（如果存在的话）在页面上执行内容重定位，同时保持事件的完整性。

更新将此停靠操作视为类似于在Visual Studio中将浮动窗口停靠在屏幕的一侧。

Answer 1

如果您使用的是jquery 1.4，则可以使用detach：

.detach（）方法与.remove（）相同，除了.detach（）保留与删除的元素关联的所有jQuery数据。当要在以后将删除的元素重新插入DOM时，此方法很有用。

<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;
   });

这应该做的是将事件类型绑定到上下文元素，而不首先查找选择器元素。不知道它是否对你的情况有用，但我认为值得一提。

为了加快速度，请使用mousedown而不是click：

$("a").mousedown(function(){
    // do stuff...
}).click(function(){return false;});

Answer 2

如果您担心缓慢，可以使用css并将div移动到您想要的位置？

Answer 3

如果您需要附加事件的大量元素，那么最有效的方法是使用事件委派。 .live（）会起作用，但正如你所见，这可能会因许多元素而变慢。

这是一个在div中侦听click事件并检查锚是否触发它的简单示例：

$("#container").click(function(e) {

  var $target = $(e.target);
  if ($target.is("a")) {
    // do some
  }

});

在页面上移动大量HTML对象并使用jQuery重新绑定事件

3 个答案: