Detached…not quite!

jQuery 1.4 has a very helpful function ‘detach’ where I can detach a section and keep it away for later use. The best part is that it keeps all my bindings intact. But like anything else you need to watch out for caveats.

Consider the following example:


$(document).ready(function (){           

   //detach and keep the reference
   var $a = $('#div-abcde').detach();

   //try to change the value of one of the detached elements
   $('#abcde').val('5678');
   
   //attach it back
   $('#div-abcd').after($a);
   
   //output
   alert($('#abcde').val());
  });
<form id = "grid-3762" name = "grid" action = "">
     <div id="div-abcd"><input type="text" id="abcd" class="abcd" value="abcd" /> </div>
      <div id="div-abcde"><input type="text" id="abcde" class="abcd" value="abcde" /> </div>
</form>

This works as expected. The statement ‘$(‘#abcde’).val(‘5678′);’ has no effect as this element has been detached. So the output is as expected, that is ‘abcde’.

Now lets do the same example a little differently. Consider this:


$(document).ready(function (){           
    //keep a reference to the element.
    //remember this element wil be part of the detach
    var $r = $('#abcde');
   
   //detach and keep the reference
   var $a = $('#div-abcde').detach();

   //try to change the value using the reference
    $r.val('5678');
   
   //attach it back
   $('#div-abcd').after($a);
   
   //output
   alert($('#abcde').val());
  });

So what we are doing here that we are changing the value of the element by using a reference to the element. This is reference $r to the element.

Now the output is ‘5678’!

So even though it is detached it still maintains its references.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s