Не срабатывает click

[laimas]

А это как делается?

В этом плане больше вопросов будет к вам, ибо "удалять с сервера файлы 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) + '">&nbsp;&nbsp;&nbsp;<img id="' + fileName(val) + '" src="/image/review/delete.png" width="20" height="20" alt="Удалить" />';

А вопрос был лишь в том, как отловить клик после динамической загрузки картинки.

[laimas]

В качестве id или class могу использовать, в частности, название файла, который надо удалить, которое получаю в первом запросе ajax. В качестве папки, из которой удалить, я указываю product_id.

Коли product_id, будем считать, что это добавление фото товару. В этом случае клиент может знать ID товара (product_id), но если id, которое "в качестве", это id добавленного фото, то оно будет известно только после загрузки фото и его связывании с товаром, то есть с product_id, то есть возвращать это клиенту. О чем я и говорил, и эти параметры и могут служить запросом для удаления. Имя тоже можно использовать, если знаем его и каталог, в котором фото находится. Все зависит от того как хранятся и связываются эти данные на сервере, чего я не знаю. А вот имя класса к данному процессу отношения не имеет.

предварительно вырезав имя файла из пути

Если знаем путь /catalog/controller/extension/module/comment_img-uploads/product_id_' + product_id + '/, что удобно не писать помногу раз, а определить единожды, а успешная загрузка означает возврат сервером имени файла (не понятно тогда как при этом ошибки возможные обрабатываются), то можно ли обойтись без "вырезки"?

Но как бы вы не формировали запрос на удаление, картинку на клиенте можно удалять только тогда, когда сервер ответил - удалено.

[Эдди]

laimas
А если забыть ВСЕ, о чем говорилось до сих пор. И взять только это:

На страницу динамически ajax-ом в цикле выводятся картинки".
У каждой есть свой конкретный id.

Как при клике по картинке вывести алерт "Hello! World." Отдельной функцией, а не вставкой динамического onclick в каждую картинку.
Поэтому я спросил, как повесить на картинку событие уже после ее динамической загрузки.

Вот вопрос.

P.S. Когда картинка изначально присутствует на странице - нет проблем. Когда динамически - проблема

Все тут.

[laimas]

А если забыть ВСЕ, о чем говорилось до сих пор.

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

Уж если говорить в контексте вашего добавления, то сначала это добавление, а удачный результат его, это уже редактирование. И если в первом случае (допустим каждое фото добавляется своим полем), это кнопка Добавить со своим обработчиком, а во втором случае, это уже кнопка Удалить, со своим обработчиком.

Если такая реализация, то выгодно делегировать обработку кнопок Добавить/Удалить общему родителю, который гарантировано есть на странице.

Либо - сервер ответил, что добавил. Клиент сформировал url к картинке, добавил ее на страницу и кнопку Удалить, которой устанавливается и обработчик.

И никаких проблем нет ни для первого случая, ни для второго.

[Эдди]

"делегировать обработку кнопок Добавить/Удалить общему родителю"...
---
В таком случае нужно просто нумеровать id картинки (0-1-2-3 и т.д.) и при прокрутке массива тоже использовать for с нумерацией.
Иначе, если делегировать родительскому элементу, то какие либо присваиваемые id тоже будут динамическими, и все останется по прежнему плохо. Так:?

[Эдди]

~~~ Сказал, не проверив. Пардон.

[Эдди]

Последний, наверное, вопрос.
Если явно задать id картинки и использовать метод on, то нормально.

$('body').on('click', '#abc', function(){
      alert('adfasdf');
  });

А если id картинки формируется динамически, то как в эту функцию вставить вместо '#abc' переменную?

[laimas]

Если явно задать id картинки и использовать метод on, то нормально.

Нет не нормально, я уж думал, что "~~~ Сказал, не проверив.", это о том, что есть понимание того, что "нужно просто нумеровать id картинки (0-1-2-3 и т.д.)", это просто зло усугубляющее ситуацию.

Каким образом банальная нумерация чего либо может иметь отношение к идентификации объекта?

Что в вашем случае является уникальным идентификатором загруженного на сервер фото? Нужно ли для каждой кнопки Удалить писать свой отдельный обработчик и отдельный запрос к индивидуальному серверному сценарию, или достаточно иметь один обработчик, один запрос отличающийся параметром, к одному сценарию?

Второе же ведь, о чем вы выше и пишите, и описываете код, тогда откуда могут рождаться мысли о вредном в данном случае - атрибуте id?

Пусть у вас идентификатор, это имя, тогда кнопки удаления и должны его содержать в атрибуте, например так data-del="name", а не вырезать его выискивая среди src. Тогда делегирование обработчика этим кнопкам, это

$(parent_selector).on('click', '[data-del]', function() {
     var btn = $(this),
         del = btn.data('del'), //то почему сервер узнает, что удалять
         etc ....
})

И делегировать нужно не тому, что удобно пишется, а ближайшему родителю, который всегда есть на странице.