Всем привет. Есть страничка с двумя колонками(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);
}
});
}
});
});
});
});
Подскажите как исправить?
