删除和附加元素后无法识别全局变量

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

Answer 2

Here you go:

var $test = $('#test'),
    str = '<div id="test"></div>';

$test.live('click', function() {
    $(this).toggleClass('blue'); // here is the change, use $(this)
});

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

Live demo: http://jsfiddle.net/mr3C4/3/

Although your code has another issue: If you intend to replace the #test element with a new one, you should also update the $test object because otherwise it refers to an DIV element that doesn't exist anymore which isn't useful.

Answer 3

Why does this happen?

Because your original variable, $test, only ever refers to the div with id=test that was in the DOM when you declared the variable. Creating another element, even one with the same ID, does make it the same element you selected.

This slide contains another example you might find helpful.