Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 29.02.2016, 13:17
Интересующийся
Отправить личное сообщение для Poveritov Посмотреть профиль Найти все сообщения от Poveritov
 
Регистрация: 28.11.2011
Сообщений: 21

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

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

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

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


в блок #photo-stock подгружается контент <img/>
Ответить с цитированием
  #2 (permalink)  
Старый 29.02.2016, 13:46
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

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, 29.02.2016 в 13:59.
Ответить с цитированием
  #3 (permalink)  
Старый 29.02.2016, 14:16
Интересующийся
Отправить личное сообщение для Poveritov Посмотреть профиль Найти все сообщения от Poveritov
 
Регистрация: 28.11.2011
Сообщений: 21

Сообщение от Dilettante_Pro Посмотреть сообщение
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="+"/>

- все равно работает
Прочитал, что возникают подобные проблемы при работе с ajax, рекомендуют задействовать live, но у меня в jquery 1.12 метод live уже исключен.
Ответить с цитированием
  #4 (permalink)  
Старый 29.02.2016, 14:27
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

Poveritov,
где код настройки аякс запроса + ответ сервера вместе со всеми http заголовками
Ответить с цитированием
  #5 (permalink)  
Старый 29.02.2016, 14:27
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Сообщение от Poveritov
но у меня в jquery 1.12 метод live уже исключен.
Вместо исключенного live как раз рекомендуется использовать on
Ответить с цитированием
  #6 (permalink)  
Старый 29.02.2016, 15:02
Интересующийся
Отправить личное сообщение для Poveritov Посмотреть профиль Найти все сообщения от Poveritov
 
Регистрация: 28.11.2011
Сообщений: 21

$.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='...' />
Ответить с цитированием
  #7 (permalink)  
Старый 29.02.2016, 15:09
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

Poveritov,
ну и назначьте обработчик на картинку в функции success.
Ответить с цитированием
  #8 (permalink)  
Старый 29.02.2016, 15:31
Интересующийся
Отправить личное сообщение для Poveritov Посмотреть профиль Найти все сообщения от Poveritov
 
Регистрация: 28.11.2011
Сообщений: 21

можно пример? так как назначил я
$(".photo-stock img#"+response.photo_id).attr("onclick","msgshow("+response.photo_id+")");

не сработало, пишет "photo is not defined"
Ответить с цитированием
  #9 (permalink)  
Старый 29.02.2016, 15:38
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

Poveritov,
У вас в первом сообщении пример. Только надо перенести его в функцию success.
$('#photo-stock').on('click', 'img', function(){
alert("Действие");
});
Ответить с цитированием
  #10 (permalink)  
Старый 29.02.2016, 15:43
Интересующийся
Отправить личное сообщение для Poveritov Посмотреть профиль Найти все сообщения от Poveritov
 
Регистрация: 28.11.2011
Сообщений: 21

Все отлично) Спасибо.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Сохранить событие после ajax Роман добрый Общие вопросы Javascript 3 11.11.2013 18:52
Книги по Ajax BaVa Учебные материалы 18 18.08.2013 14:05
Событие click Гробовщик jQuery 1 31.07.2013 07:28
Перемещение блока при скроллинге region029 Общие вопросы Javascript 10 16.06.2012 10:41
событие на динам. элемент (jQery, Ajax, php) kost_ik jQuery 2 06.11.2010 12:16