Question

I have a global variable var $test = $('#test'); where #test id of div that initially exist in DOM. If i remove the div with remove() and append it again then the global variable $test no longer recognizes the the newly appended div with id #test. What am i doing wrong. Why does this happen?

Check http://jsfiddle.net/mr3C4/

Answer 1

Instead of creating a new element from the string, just append the original element:

var $test = $('#test');
$test.live('click', function() {
    $test.toggleClass('blue');  // 2. continues to reference $test
});

$('button').click(function() {
    $test.remove();
    $test.appendTo('body');  // <-- 1. append the same element that you removed
});

Example: http://jsfiddle.net/mr3C4/5/

That way your handler is still referencing the same element you have referenced in the $test variable.

This is because $test is referencing a specific jQuery object that references a specific element, which is no longer part of the DOM. You were recreating an idential element from a string in your original code.

---

…or you can use the detach()^[docs] method instead of the remove()^[docs] method if you want to keep jQuery data associated with it.

var $test = $('#test');
$test.live('click', function() {
    $test.toggleClass('blue');
});

$('button').click(function() {
    $test.detach();
    $test.appendTo('body');
});

Example: http://jsfiddle.net/mr3C4/6/

---

EDIT:

If you want to update your element, it is better to use the method above, and make modifications to the original.

If you can’t do that because you’re making a change that can’t be made to the original, like changing the tagName, then create your new element, and update your variable.

var $test = $('#test'),
    x = '<p id="test"></p>';
$test.live('click', function() {
    $test.toggleClass('blue');
});

$('button').click(function() {
    $test.detach();
    $test = $( x ).appendTo('body'); // update the variable
});

You could even keep the same jQuery object, and just update the element:

var $test = $('#test'),
    x = '<p id="test"></p>';
$test.live('click', function() {
    $test.toggleClass('blue');
});

$('button').click(function() {
    $test.detach();
    $test[0] = $( x ).appendTo('body')[0]; // update the element at index 0
});