всем доброго времени суток! я новичок в данном фреймворке, поэтому не судите строго) подскажите, плз, где я ошибаюсь?
вот работающий пример:
http://jsfiddle.net/A9h8c/
Описание траблы: есть два блока-контейнера, в одном вместе с уже имеющимися span'ами могут создаваться создаются другие щелчком по ссылке с a#remove. При удалении исходных span'ов необходимо чтобы их значения атрибута attr передавались в div#container
Я повесил на обработчик события $('#add').click событие $('.remove').click не случайно, т.к. без этого щелчек по ссылке "Удалить" на новом элементе не дает никакого эффекта. Но в другом случае - посмотрите какой бред происходит: если сразу удалить вновь созданный span (attr="new"), то после этого удаление первоначальных span'ов вызывает добавление в div#container значений attr по нескольку раз. Итак вопрос, что я не так сделал?
Код:
<!DOCTYPE html>
<html>
<head>
<title>add/remove</title>
<script type="text/javascript" src="jquery-1.8.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var item = '<span class="a" attr="new"><a href="#" class="remove">Удалить</a></span>';
$('.remove').click(function(){
$(this).parents('span').remove();
attr = $(this).parents('span').attr('attr');
if (attr != 'new') $('#container').append('<span>'+attr+'</span>');
});
$('#add').click(function(){
$('#items').append(item);
$('.remove').click(function(){
$(this).parents('span').remove();
attr = $(this).parents('span').attr('attr');
if (attr != 'new') $('#container').append('<span>'+attr+'</span>');
});
});
});
</script>
<style type="text/css">
span {display:inline-block; margin:10px;}
#items, #container {border:1px solid black;}
#items span a {
background:#dff;
}
a#add {
background:#ffd;
}
#container span {background:#fdf;}
</style>
</head>
<body>
<div id="items">
<span class="a" attr="1"><a href="#" class="remove">Удалить</a></span>
<span class="a" attr="2"><a href="#" class="remove">Удалить</a></span>
<span class="a" attr="3"><a href="#" class="remove">Удалить</a></span>
</div>
<div><a id="add" href="#">Добавить</a></div>
<div id="container">
</div>
</body>
</html>