Javascript-форум - Событие click на подгружаемый ajax-ом контент

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Событие click на подгружаемый ajax-ом контент (https://javascript.ru/forum/misc/61658-sobytie-click-na-podgruzhaemyjj-ajax-om-kontent.html)

Событие click на подгружаемый ajax-ом контент

Добрый день,

в скрипте подгружаю ajax-ом контент, использую jquery 1.12.1
для подгружаемого контента использую метод on для события click.

Но в ответ ничего не происходит. Ошибок никакие не поступает.
Подскажите, как нужно исправить код, чтобы была реакция подгружаемого контента на обращающиеся к нему события.

$('#photo-stock').on('click', 'img', function(){
alert("Действие");
});

в блок #photo-stock подгружается контент <img/>

Poveritov,
Что-то всячески крутил-вертел... Работает. Не смог добиться, чтобы не работало. Правда, без ajax, но подгружаемый.

<!DOCTYPE html>
<html>
<head>
    <title>Untitled Page</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js" type="text/javascript"></script>
    <script>
       $(document).ready(function () {
          $('#photo-stock').on('click', 'img', function () {
              alert("Действие");
          });
       });
    </script>
</head>
<body>
   <div id="photo-stock"></div>
   <script>
       $('#photo-stock').html("<img src='http://javascript.ru/forum/images/smilies/smile.gif'>");
   </script>
</body>
</html>

Для имитации задержки при загрузке использовал вместо скрипта стр.16-18

<input type=button onclick="$('#photo-stock').html(`<img src='http://javascript.ru/forum/images/smilies/smile.gif'>`)" value="+"/>

- все равно работает

Цитата:

Сообщение от Dilettante_Pro (Сообщение 409596)

<!DOCTYPE html>
<html>
<head>
    <title>Untitled Page</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js" type="text/javascript"></script>
    <script>
       $(document).ready(function () {
          $('#photo-stock').on('click', 'img', function () {
              alert("Действие");
          });
       });
    </script>
</head>
<body>
   <div id="photo-stock"></div>
   <script>
       $('#photo-stock').html("<img src='http://javascript.ru/forum/images/smilies/smile.gif'>");
   </script>
</body>
</html>

Для имитации задержки при загрузке использовал вместо скрипта стр.16-18

<input type=button onclick="$('#photo-stock').html(`<img src='http://javascript.ru/forum/images/smilies/smile.gif'>`)" value="+"/>

- все равно работает

Прочитал, что возникают подобные проблемы при работе с ajax, рекомендуют задействовать live, но у меня в jquery 1.12 метод live уже исключен.

Poveritov,
где код настройки аякс запроса + ответ сервера вместе со всеми http заголовками

Цитата:

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

но у меня в jquery 1.12 метод live уже исключен.

Вместо исключенного live как раз рекомендуется использовать on

$.ajax({
                url:'/account/metrics/phloader',
                type: 'POST',
		dataType:"json",
		data:({"urlPhoto":postData,"idPhoto":idPhoto}),
                success: function(response) {
			//происходит вставка <img src='' />			
		    $(".photo-stock ").append(response.photo_mini);

		return true;
                    } ,
			error: function(jqXHR, textStatus, errorThrown)  {....},

            });

в response.photo_mini возвращается <img src='...' />

Poveritov,
ну и назначьте обработчик на картинку в функции success.

можно пример? так как назначил я

$(".photo-stock img#"+response.photo_id).attr("onclick","msgshow("+response.photo_id+")");

не сработало, пишет "photo is not defined"

Poveritov,
У вас в первом сообщении пример. Только надо перенести его в функцию success.

$('#photo-stock').on('click', 'img', function(){
alert("Действие");
});

Все отлично) Спасибо.