Объект при загрузке страницы и после операций над ним

[fact]

Пишу плагин для работы с деревом сайта.

Объекты $('#elements') и $('#treeview') при загрузке забирают в себя списки #elements и #treeview, после нажатия кнопки cut, элемент li списка #treeview переносится в список '#elements', но объект $('#elements') не воспринимает перенесенный li своим(то есть по нему нельзя кликнуть и выделить).

Вопрос, как переинициализировать объект $('#elements'), чтобы он считал перенесенные li своими?

До нажатия кнопки:

<ul id="treeview">
<li><span>пункт 1</span></li>
<li><span>пункт 2</span>
<ul>
   <li><span>пункт 2.1</span></li>
   <li><span>пункт 2.2</span></li>
   <li><span>пункт 2.3</span></li>
</ul>
</li>
<li><span>пункт 3</span></li>
</ul>


<ul id="elements">
<li><span>пункт 1</span></li>
<li><span>пункт 2</span></li>
<li><span>пункт 3</span></li>
</ul>

После нажатия кнопки:

<ul id="treeview">
<li><span>пункт 1</span></li>
<li><span>пункт 2</span>
<ul>
   <li><span>пункт 2.1</span></li>
   <li><span>пункт 2.3</span></li>
</ul>
</li>
<li><span>пункт 3</span></li>
</ul>


<ul id="elements">
<li><span>пункт 1</span></li>
<li><span>пункт 2</span></li>
<li><span>пункт 3</span></li>
<li><span>пункт 2.2</span></li>
</ul>

(function($) {
	selectNode = function(obj) {
	var foo = $('li>span',obj);
	$(foo).bind('click', function()
	{
			if ($(this).hasClass('selected')) {
				$(this).removeClass('selected');
			}
			else {
				$(obj).find('span').removeClass('selected'),
				$(this).addClass('selected')
			}
	})};
		
	cut = function(){
		$("button[value='cut']").click(function(){
			var selectedSpan = $('#treeview').find('span.selected');
			var currentLi = selectedSpan.parent('li').removeClass();
			currentLi.remove().appendTo('#elements');
		});
	}
	
	$.fn.editTreeView = function() {
			
		cut();
		selectNode ($('#treeview'));
		selectNode ($('#elements'));
};})(jQuery);

[x-yuri]

1) а remove нужен?

$('#elements') не воспринимает перенесенный li своим(то есть по нему нельзя кликнуть и выделить)

2) так $('#elements') не содержит добавленный li, или по li нельзя кликнуть, или обработчик не срабатывает или его вообще не видно?

[fact]

1) а remove нужен?

без remove li продолжает пренадлежать объекту $('#treeview')

2) так $('#elements') не содержит добавленный li, или по li нельзя кликнуть, или обработчик не срабатывает или его вообще не видно?

li добавляется в список #elements, но по нему нельзя кликнуть.

при загрузке страницы объекты $('#elements') и $('#treeview') забирают в себя одноименные списки и не обновляются после нажатия кнопки, то есть переносимый li добавляется в список #elements и его видно, но объект $('#elements') содержит те же самые li которые получил при загрузке страницы.

[x-yuri]

а ты сохраняешь этот объект ($('#elements')) и дальше пытаешься его использовать? В этом случае, естественно, в нем ничего не меняется. Он содержит набор элементов и не меняется, пока ты ему об этом не скажешь. Чтобы получить новый список элементов еще раз пишешь $('#elements')

[fact]

а ты сохраняешь этот объект ($('#elements')) и дальше пытаешься его использовать? В этом случае, естественно, в нем ничего не меняется.

не совсем понял что ты имеешь ввиду...

Чтобы получить новый список элементов еще раз пишешь $('#elements')

в том то и дело, что не понимаю как его переинициализировать и куда написать?

На всякий случай прикрепил код.

[x-yuri]

а-а, так у тебя по идее просто обработчик "теряется" при перемещении. Поищи на сайте jQuery event delegation (когда обработчики назначаются не конкретным элементам, а селекторам)
p.s. у тебя cut - глобальная переменная, если хочешь сделать локальную (внутреннюю) функцию, пиши так:

function f1() {
    ...
    f2();
    ...
    function f2() {

        ...
    }
}

[fact]

function f1() {
    ...
    f2();
    ...
    function f2() {

        ...
    }
}

спасибо, посмотрю...

[fact]

x-yuri,
Event delegation - то, что надо! Проблема решена, еще раз спасибо!