Не срабатывает click
Замылились глаза или мозги. Вообще плохо знаю 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) + '"> <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? Внутри той же функции? Что я делаю не так? |
Удалить что?
|
Цитата:
В принципе, как удалить, я знаю. Но не захватывается событие клик, чтобы функцией jquery удалить файл и картинку со страницы. |
Эдди,
И у всех картинок "Удалить" id="delfile" ? |
Цитата:
А предпросмотр загруженного, то что отображено на клиенте, это удалить можно. Если пердпросмотр это <div class="img-reply" id="img-reply"></div>, то ('#img-reply').empty() |
<!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>
|
j0hnik,
это видимо кнопка вызова операции удаления. |
Цитата:
|
j0hnik,
Ай спасибо!!! Ща буду пробовать. А в чем у меня была ошибка? И еще. Удалить надо не только картинку, но и "кнопку" удалить рядом с этой картинкой. В див вставить и див удалить? |
Эдди,
предполагаю, что на момент выполнения данного кода
$('#delfile').click(function() {
alert('Тра-ля-ля');
});
кнопки на странице еще нет, и обработчик не вешается. |
Ошибки значит есть, в самом обработчике их нет. Консоль подскажет.
|
Цитата:
|
Эдди,
Обработчик вешать колбек функцией. Или Вешать обработчик на родителя, выполнять проверку на нужный элемент. |
Цитата:
Вы не поясняете как делаете, и когда с ... А коли все это у вас динамически добавляется на страницу, то не Load, а либо делегирование обработки события, либо установка обработчика после добавления элемента на страницу. |
Цитата:
|
Цитата:
"делегирование обработки события"??? Говорил, JS использую только по мере необходимости.:-/ |
Эдди,
если по полной, то в вашем коде напрочь отсутствует логика. Допустим - имеется исходный код: поле выбора файла, бокс куда будет помещаться предпросмотр и кнопка "Отменить", именно Отменить, а не Удалить, ибо нет у вас никакого удаления. Загрузка файлов при этом асинхронная. Допустим - выбираем файл и грузим на сервер. Если нет ошибок, то по ответу сервера поле очищается и очищается бокс предпросмотра. Все, можно выбирать другой файл этим же набором элементов. Если хотим отказаться от загрузки щелкаем Отметить. Никакого делегирования не требуется. А если клонируем этот набор, это уже динамическое добавление элементов. В остальном поведение может быть таким же. Встает вопрос - а зачем так много наборов, если можно все делать одним? Если предполагается, что сперва набираем, а уже множество файлов загружаем (а не видно по вопросам чтобы это было так), тогда да. Но почему при удачной загрузке файлов нужно щелкать кнопки удаляя вручную отработанные наборы? |
Цитата:
Клиент хочет загрузить несколько изображений на сайт. Он их именно сразу загружает, а не просто выводит для просмотра. Сразу же после загрузки клиент видит на странице уменьшенные уже загруженные на сервер картинки. И если вдруг передумал какую-то из них оставлять, то удаляет ее и конкретно ее. Или надо их сначала показать, отобрать, а потом загрузить? Особой разницы не вижу. |
Предпросмотр загружаемого в рамках HTML5 можно организовать и до загрузки изображения на сервер.
Но пусть ваши картинки, это не предпросмотр, а что уже загрузилось, что в общем то можно и не делать, если это можно и на клиенте сделать. Загрузка изображения на сервер, как впрочем и любого файла не обязательно успех и сразу, возможны ошибки загрузки. Значит это еще требует обработки. Пусть в этом вопросе у вас все как положено, но если "удалить после загрузки", то вообще не понятно как же вы удаляете их: 1) Должен быть запрос на сервер на удаление фото по параметрам которые должен возвращать сервер. 2) Клиент не имеет права удалять картинку на клиенте пока сервер не даст положительного ответа - изображение удалено. |
Собираюсь удалять с сервера файлы ajax-запросом.
А это как делается? "установка обработчика после добавления элемента на страницу" |
Цитата:
А значит успешная загрузка сервером фото, это возврат клиенту информации о том, как это фото идентифицируется на сервере, чтобы по этим параметрам можно было сделать запрос на корректное удаление фото и прочего с ним связанного. |
Цитата:
В качестве id или class могу использовать, в частности, название файла, который надо удалить, которое получаю в первом запросе ajax. В качестве папки, из которой удалить, я указываю product_id. Разве не так? Указываю серверному сценарию, в какую папку сохранить
$.ajax({
url : '/catalog/controller/extension/module/comment_img-upload.php?product_id=' + product_id,
Указываю, какую картинку удалить, предварительно вырезав имя файла из пути img_name += '<br><img style="max-width: 500px; height: auto" src="/catalog/controller/extension/module/comment_img-uploads/product_id_' + product_id + '/' + fileName(val) + '"> <img id="' + fileName(val) + '" src="/image/review/delete.png" width="20" height="20" alt="Удалить" />'; А вопрос был лишь в том, как отловить клик после динамической загрузки картинки. |
Цитата:
Цитата:
Но как бы вы не формировали запрос на удаление, картинку на клиенте можно удалять только тогда, когда сервер ответил - удалено. |
laimas
А если забыть ВСЕ, о чем говорилось до сих пор. И взять только это: На страницу динамически ajax-ом в цикле выводятся картинки". У каждой есть свой конкретный id. Как при клике по картинке вывести алерт "Hello! World." Отдельной функцией, а не вставкой динамического onclick в каждую картинку. Поэтому я спросил, как повесить на картинку событие уже после ее динамической загрузки. Вот вопрос. :) P.S. Когда картинка изначально присутствует на странице - нет проблем. Когда динамически - проблема Все тут. |
Цитата:
Уж если говорить в контексте вашего добавления, то сначала это добавление, а удачный результат его, это уже редактирование. И если в первом случае (допустим каждое фото добавляется своим полем), это кнопка Добавить со своим обработчиком, а во втором случае, это уже кнопка Удалить, со своим обработчиком. Если такая реализация, то выгодно делегировать обработку кнопок Добавить/Удалить общему родителю, который гарантировано есть на странице. Либо - сервер ответил, что добавил. Клиент сформировал url к картинке, добавил ее на страницу и кнопку Удалить, которой устанавливается и обработчик. И никаких проблем нет ни для первого случая, ни для второго. |
"делегировать обработку кнопок Добавить/Удалить общему родителю"...
--- В таком случае нужно просто нумеровать id картинки (0-1-2-3 и т.д.) и при прокрутке массива тоже использовать for с нумерацией. Иначе, если делегировать родительскому элементу, то какие либо присваиваемые id тоже будут динамическими, и все останется по прежнему плохо. Так:? |
~~~ Сказал, не проверив. Пардон.
|
Последний, наверное, вопрос.
Если явно задать id картинки и использовать метод on, то нормально.
$('body').on('click', '#abc', function(){
alert('adfasdf');
});
А если id картинки формируется динамически, то как в эту функцию вставить вместо '#abc' переменную? |
Цитата:
Каким образом банальная нумерация чего либо может иметь отношение к идентификации объекта? Что в вашем случае является уникальным идентификатором загруженного на сервер фото? Нужно ли для каждой кнопки Удалить писать свой отдельный обработчик и отдельный запрос к индивидуальному серверному сценарию, или достаточно иметь один обработчик, один запрос отличающийся параметром, к одному сценарию? Второе же ведь, о чем вы выше и пишите, и описываете код, тогда откуда могут рождаться мысли о вредном в данном случае - атрибуте id? Пусть у вас идентификатор, это имя, тогда кнопки удаления и должны его содержать в атрибуте, например так data-del="name", а не вырезать его выискивая среди src. Тогда делегирование обработчика этим кнопкам, это
$(parent_selector).on('click', '[data-del]', function() {
var btn = $(this),
del = btn.data('del'), //то почему сервер узнает, что удалять
etc ....
})
И делегировать нужно не тому, что удобно пишется, а ближайшему родителю, который всегда есть на странице. |
| Часовой пояс GMT +3, время: 02:00. |