jQuery отключается или не реагирует на новое содержимое?
 

Всем привет. Есть страничка с двумя колонками(div):

- первая колонка загружает картинки с помощью ajax и после загрузки заменяет содержимое второй колонки свежим содержимым, которое она получает в ответ на post-запрос, отправленный через ajax.

- вторая колонка содержит список всех картинок, на каждую картинку повешено событие, которое отправляет post-запрос на удаление этой картинки.

Проблема в следующем:
При загрузке новой картинки происходит замена всей второй колонки и после этого вторая колонка перестает обрабатывать события.

Код:

$(document).ready(function () {
var btnUpload = $('#upload');
new AjaxUpload(btnUpload, {
        action:'upload.php',
        name:'upload',
        onSubmit:function (file, ext) {
            if (!(ext && /^(jpg|png|jpeg|gif)$/.test(ext))) {
                status.show().text('Разрешена загрузка файлов следующего формата: JPG, PNG, GIF.').fadeOut(5000);
                return false;
            }
            status.show().text(' Загрузка...');
        },
        onComplete:function (file, response) {
            status.fadeOut(1000);
            $("#message").fadeIn(500).html("Загрузка файла завершена.").fadeOut(4000);
            var rr = response;
            var fstatus = $(rr).filter("#state").html();
            var fname = $(rr).filter("#fname").html();
            if (fstatus == "success") {
                $('<li></li>').appendTo('#files').html('<img src="img/gallery/' + fname + '" alt="" /><br />' + file).
                    addClass('success').animate({ backgroundColor:"#99F099"}, 5000).fadeOut(1000);
            } else if (fstatus == "error") {
                $('<li></li>').appendTo('#files').text("Загрузка " + fname + " не удалась.").addClass('error');
            }
            $.post("geditf.php", {command:"refresh"}, function (data) {
                //обновляем правую колонку после загрузки файла
                $("#rightpanel").html(data);
                $("#rightpanel").css({height:"inherit"});
                $("#leftpanel").css({height:"inherit"});
            });
        }
    });
	
	//Это событие перестает работать после загрузки новой картинки
	$(".delbtn").each(function () {
        $(this).click(function () {
            var dt;
            var fl = $(this).attr("href");
            //удаление фото:
            $.post("geditf.php", {command:"del", file:fl }, function (data) {
                dt = data;
                var msg = $(dt).filter("#msg").html();
                var kil = $(dt).filter("#kil").html();
                $("#message").fadeIn(500).html(msg).fadeOut(4000);
                if (dt.length > 50) {
                    $("#delstate").html("Удаление фотографий [" + kil + "]");
                    $(".imgholder").each(function () {
                        if ($(this).attr("title") == fl) {
                            $(this).fadeOut(1000);
                        }
                    });
                }
            });

        });
    });
});

Подскажите как исправить?

recew,
http://api.jquery.com/on/

Спасибо, то что мне было нужно. Вопрос закрыт.

Кто столкнется с такой-же проблемкой, вот решение:
После подгрузки нового содержимого прикрепляем к нему обработчик(и) событий заново с помощью on().
В моем случае:

onComplete:function (file, response) {
            $("#message").fadeIn(500).html("Загрузка файла завершена.").fadeOut(4000);
            var rr = response;
            var fstatus = $(rr).filter("#state").html();
            var fname = $(rr).filter("#fname").html();
            if (fstatus == "success") {
                $('<li></li>').appendTo('#files').html('<img src="img/gallery/' + fname + '" alt="" /><br />' + file).
                    addClass('success').animate({ backgroundColor:"#99F099"}, 5000).fadeOut(1000);
            } else if (fstatus == "error") {
                $('<li></li>').appendTo('#files').text("Загрузка " + fname + " не удалась.").addClass('error');
            }
            $.post("geditf.php", {command:"refresh"}, function (data) {
                //обновляем правую колонку после загрузки файла
                $("#rightpanel").html(data);
				//вешаем новые обработчики событий:
                $(".delbtn").each(function () {
                    $(this).on("click", function () {
                        ....

recew, не так.
$(document).on('click', '.delbtn', function(){}) - и это вне всяких циклов и callback-функций. Фактически, это навешает обработчик на document и всякий раз при клике будет проверяться, подходит ли под селектор элемент, по которому произошел клик, и в случае совпадения вызываться обработчик. Вместо document лучше элемент-родитель динамичных элементов. Кажется это '#rightpanel' .

И даже как сейчас сделано - там цикл each не нужен, в jquery он уже встроен.