Home/ Questions/Q 623957
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T19:08:55+00:00

I have a DIV with many elements that are all clickable. Each one with

  • 0

I have a DIV with many elements that are all clickable. Each one with it’s own unique event. This DIV has a "docked" mode where it shows in some other place and layout on the page, when the mode is toggled.

I have to note that my main target browser is IE8. Many of the problems I’m facing here (SSSLLLLLOOOOWWWWW) just go away when I test on Chrome.

I was trying to use the $(...).html() method to move the HTML content to the new location. This works but the events are lost. I can use the .live() instead of .bind() but this makes all event responses about 10 time slower (remember I have MANY elements in that DIV).

Another thing I tried, is to just create content into both DIVs and bind events to both. Then I can toggle the main DIV visibility. That made the DOM creation much slower than before (still an instant on Chrome, but not on IE).

I’m looking for the "classic" way (if it exist) to perform this relocation of content on the page, while keeping the events intact.

UPDATE Think of this docking action as something similar to docking a floating window to one side of the screen in visual studio.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you are using jquery 1.4 you can use 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>

    or use clone(true) if you want both divs displayed at the same time:

    var divs = $("#container1").clone(true);
$("#container2").empty().append(divs);

    About $.fn.live() being too slow:
    You can try modifying “live” to be a little more efficient so that it would work like this:

    // $.live(selector,    context,         event,   fn);
   $.live("a.explode", "div.container", "click", function(){
       alert("boom"); return false;
   });

    What this should do is bind the event type to the context element WITHOUT looking for the selector elements first. Don’t know if it will be useful in your case but I thought it was worth mentioning.

    To speed things up even more use mousedown instead of click:

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