Здравствуйте уважаемы форумчане. Есть у меня проблемка небольшая. Через аякс загружаю на странице в <div='peview'></div> несколько фотографий <img src='' class='imgList'>. Изначально загрузка идёт с php странички, т.е. с помощью json проверяю есть ли они вообще у меня и, если есть загружаю в превью указанный выше. Теперь, с помощью JQuery я создаю обработчик удаления фотографий. Т.к. класс у них один и тот же, на сколько я знаю без итерации тут не обойтись, использую each. Теперь в общем:
$('.imgList').each(function() {
$(this).on('click', function() {
var deleteFile = confirm("Удалить эту фотографию?");
if(deleteFile == true) {
//Тут обработка...
}
});
});
Затем, на этой же страничке есть соответсвено форма загрузки изображений. Кто знаком с jquery.wallform.js? Вот я использую именно эту библиотеку. Смысл её в том что она загружает изображение на сервер, показывая превьюшку фотографии. Так вот эта самая превьюшка грузится в тот же <div='peview'></div>. Выходит что, при загрузке страницы загружается 5 фотографий и, с помощью формы догружается ещё одна. Проблема в том что итерация с each уже была воспроизведена при загрузке страницы, оно и понятно, по этому и не видит клика по нажатию на фото подгруженного в <div='peview'></div> через wallform аякс. Вот этот кусочек кода...
$('#photoimg').die('click').live('change', function() {
$("#imageform").ajaxForm({target: '#preview',
beforeSubmit:function(){
$("#imageloadstatus").show();
$("#imageloadbutton").hide();
},
success:function(){ // Тут у нас всё шикарно, фото загрузилось
$("#imageloadstatus").hide();
$("#imageloadbutton").show();
},
error:function(){
$("#imageloadstatus").hide();
$("#imageloadbutton").show();
} }).submit();
});
....предоставляется так же от wallform. Я пробовал функцию с each обернуть в анонимную функцию и делал вызов этой функции в success:function() {...} Но получается так что обработчик вешается вновь и вновь и в итоге получается такая каша что ппц... В общем задача состоит в том что бы слушать id #preview постоянно. Итог в кратце: Страница загрузилась, фото ЗАгрузились, фото ДОгрузились через форму, навёл на фото, удалил фото. Прошу прощения за многословие, но я думаю что лучше объяснить от и до для лучшего понимания. Спасибо за ранее и за понимание :)
Вы можете воспользоваться возможностью jQuery слушать события нажатия не на конкретный .imgList, а на родителя #preview.
Посмотрите документацию .on().
В итоге, код обработчика может выглядеть вот так
$('#preview').on('click', '.imgList', function() {
var deleteFile = confirm("Удалить эту фотографию?");
if(deleteFile == true) {
//Тут обработка...
}
});
Пример использования:
$('#preview').on('click', '.imgList', function() {
var deleteFile = confirm("Удалить эту фотографию?");
if (deleteFile == true) {
//Тут обработка...
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="preview">
<div class="imgList">imgList 1</div>
<div class="imgList">imgList 2</div>
<div class="imgList">imgList 3</div>
</div>
Я обходил такую проблему с помощью метода .off()
Например: $("#element").off().on("click", function(){});
Если этот код запихать в цикл, то обработчик всегда будет один единственный.
!!! Крайне важно .off() без параметров очищает все обработчики событий !!!
Продвижение своими сайтами как стратегия роста и независимости