Форум

Эдди · #1 (**permalink**) 04.04.2018, 17:50

Замылились глаза или мозги. Вообще плохо знаю JS.

Загружаю картинки на сервер.
В конце загрузки вывожу в <div> загруженные изображения.
Рядом с каждой картинкой выводится картинка "Удалить"

<div class="img-reply" id="img-reply"></div>

(function($){    
//загрузка файлов

img_name += '<br><img style="max-width: 500px; height: auto" src="/catalog/controller/extension/module/comment_img-uploads/product_id_' + product_id + '/' + fileName(val) + '">&nbsp;&nbsp;&nbsp;<img id="delfile" src="/image/review/delete.png" width="20" height="20" alt="Удалить" />';

$('.img-reply').html( img_name );

})(jQuery)

Если в теге картинки "Удалить" пишу onclick="alert('тра-ля-ля')", работает.

А так не работает:

<script> 
    $(function() {
            $('#delfile').click(function() {
                alert('Тра-ля-ля');
            });
    })
</script>

Вообще где эта функция должна находиться?
В новой оболочке jquery? Внутри той же функции?
Что я делаю не так?

laimas · #2 (**permalink**) 04.04.2018, 18:03

Удалить что?

Эдди · #3 (**permalink**) 04.04.2018, 18:06

Сообщение от laimas

Удалить что?

Только что загруженную и выведенную на страницу картинку.
В принципе, как удалить, я знаю. Но не захватывается событие клик, чтобы функцией jquery удалить файл и картинку со страницы.

Dilettante_Pro · #4 (**permalink**) 04.04.2018, 18:21

Эдди,
И у всех картинок "Удалить" id="delfile" ?

laimas · #5 (**permalink**) 04.04.2018, 18:23

Сообщение от Эдди

Только что загруженную и выведенную на страницу картинку.

Картинку загруженную на сервер (не видно самой загрузки) нельзя удалить на клиенте, для этого нужно делать запрос на сервер. Но какой тогда смысл в такой загрузке?

А предпросмотр загруженного, то что отображено на клиенте, это удалить можно.

Если пердпросмотр это <div class="img-reply" id="img-reply"></div>, то ('#img-reply').empty()

j0hnik · #6 (**permalink**) 04.04.2018, 18:25

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<img src="https://javascript.ru/forum/images/ca_serenity/misc/logo.gif" alt="" class="img"> <img src="" alt="Удалить"><br>
<img src="https://javascript.ru/forum/images/ca_serenity/misc/logo.gif" alt="" class="img"> <img src="" alt="Удалить"><br>
<img src="https://javascript.ru/forum/images/ca_serenity/misc/logo.gif" alt="" class="img"> <img src="" alt="Удалить"><br>
<script> 
    $(function() {
            $('[alt="Удалить"]').click(function() {
                $(this).prev('.img').remove();
            });
    })
</script>

	</script>
</body>
</html>

laimas · #7 (**permalink**) 04.04.2018, 18:27

j0hnik,
это видимо кнопка вызова операции удаления.

Эдди · #8 (**permalink**) 04.04.2018, 18:47

Сообщение от laimas

j0hnik,
это видимо кнопка вызова операции удаления.

Да. Но в данный момент удаление/не удаление не играет роли. Почему не откликается на алерт?

Эдди · #9 (**permalink**) 04.04.2018, 18:48

j0hnik,
Ай спасибо!!! Ща буду пробовать.

А в чем у меня была ошибка?

И еще. Удалить надо не только картинку, но и "кнопку" удалить рядом с этой картинкой.
В див вставить и див удалить?

j0hnik · #10 (**permalink**) 04.04.2018, 18:50

Эдди,
предполагаю, что на момент выполнения данного кода

$('#delfile').click(function() {
     alert('Тра-ля-ля');
});

кнопки на странице еще нет, и обработчик не вешается.

Форум

Справочник

Discord чат

Курсы javascript