После функции append удалить элемент который появился

[shaltay]

Доброго времени.
Есть скрипт:

$(document).ready(function() {

$('.elem').click(function(){
$('#itog').append('<div class="work">надпись</div>');
});

$('.work').click(function(){
$(this).hide();
});

});



Но этот код не работает. Дивы появляются, но уже не удаляются. В чем дело?
Заранее спасибо!

[ASerputko]

Используй $(this).remove();
вместо $(this).hide();

$(document).ready(function() {
$('.elem').click(function(){
$('#itog').append('<div class="work">надпись</div>');
});
$('.work').click(function(){
$(this).remove();
});
});

[shaltay]

СПасибо за совет, но так тоже не работает. Да и хотелось бы вообще fadeOut сделать, но так тоже не работает.

[walik]

Вы вешаете событие до того как элемент был добавлен на страницу.
Попробуйте так:

$(document).ready(function() {

$('.elem').click(function(){
$('#itog').append('<div class="work">надпись</div>');
$('.work').click(function(){
$(this).hide();
});
});
});

[shaltay]

Вы вешаете событие до того как элемент был добавлен на страницу.


Вот теперь работает все! Спасибо большое!

[kalina]

При многократном нажатии Append дублируется. Как этого избежать?
Прошу помощи...

[nikita.mmf]

1-ый способ:

$(document).ready(function() {
$('#itog').delegate(".work", "click", function( e ){
$(e.currentTarget).hide();
});
$('.elem').click(function(){
$('#itog').append('<div class="work">надпись</div>');
});
});

2-ой способ:

$(document).ready(function() {
$('.elem').click(function(){
$('<div class="work">надпись</div>')
.click(funcion(){$(this).hide();})
.appendTo('#itog');
});
});

[kalina]

Не работают... Ни тот ни другой :(

[walik]

$(function() {
$('.elem').click(function() {
if (!$(this).has('.work').length)
$('<div class="work">Work</div>').appendTo('.elem');
});
$('.work').live('click', function() {
$(this).hide();
});
});

[kalina]

Работает! :)
$(this).hide();
видимо лучше заменить на
$(this).remove();
Спасибо!