0

Здравствуйте уважаемы форумчане. Есть у меня проблемка небольшая. Через аякс загружаю на странице в <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 постоянно. Итог в кратце: Страница загрузилась, фото ЗАгрузились, фото ДОгрузились через форму, навёл на фото, удалил фото. Прошу прощения за многословие, но я думаю что лучше объяснить от и до для лучшего понимания. Спасибо за ранее и за понимание :)

2 ответа 2

1

Вы можете воспользоваться возможностью 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>

3
  • @sergei1094 В таком случае, давайте html код в студию! 29 мар 2019 в 6:09
  • Я прошу прощения, свой код закоментировал и в конце не поставил закрывающийся тэг коментария. Ваш метод работает) Спасибо
    – sergei1094
    29 мар 2019 в 6:35
  • @sergei1094 ничего страшного - бывает. 29 мар 2019 в 6:38
1

Я обходил такую проблему с помощью метода .off()

Например: $("#element").off().on("click", function(){});

Если этот код запихать в цикл, то обработчик всегда будет один единственный.

!!! Крайне важно .off() без параметров очищает все обработчики событий !!!

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.