Почему не работает javascript после ajax получения ответа?

На странице реализована фильтрация товаров через ajax.
После получения ответа от сервера и его вставки на страницу перестает работать скрипт с ховер эффектом.

Скрипт подключен в head
<script type="text/javascript" src="/forhtml/js/jquery-hover-effect.js"></script>


Код отправки ajax запроса и обработка ответа
$(".color_delete").click(
         function () {
               $('input.filter_color').val("");
               var str = $("#formfilter").find('input').not('[value=""]').serialize();
               $("#loadImg").show(); 
               $.get(
                       "?"+str, 
                        {
                           sorting:1
                         },
                        onAjaxSuccess
                 );
         }); 
function onAjaxSuccess(data)
{
    $("#loadImg").hide();
     var content = $(data).find( '#all_products' );
      $("#sectionproducts").empty().append(content);
}

Пробовала строку
$("#sectionproducts").empty().append(content);
заменить на
$("#sectionproducts").empty().html(content);
Результат не меняется

Как можно решить проблему работы скриптов после отправки ajax запроса?
  • Вопрос задан
  • 33094 просмотра
Пригласить эксперта
Ответы на вопрос 10
Добрый день.
Может это конечно и некропост, но все же я хотел написать по поводу 2го пункта, про событие jQuery.on().
Везде написано
$("div").on("click", function(){
/** что то делается **/
})

Но более точное и правильное я нашел в сети, чтобы скрипт отрабатывал именно на подгруженных ajax элементах:
$('ближайший_родительский_и_статический_элемент').on('событие', 'динамически_подгруженный_елемент', function(){
    // действия, которые надо выполнить
});
Ответ написан
antonio1107
@antonio1107
Заместитель руководителя
Решено! JQuery обработчики, такие как hover(), click(), bind(), on() и т.д. обрабатывают элементы только при загрузке.
Чтобы они реагировали на подгруженный ajax'ом контент, есть несколько решений:
  1. Загрузить ajax'ом скрипт заново(не лучший вариант). Но работает.
  2. Использовать обработчик live(). Но с версии >= JQuery 1.9 его убрали и перенесли в обработчик on(), в котором объединили и bind(), и delegate().
  3. На мой взгляд, самый лучший. Для тега установить атрибут onClick, установить ему значение функции, например:
    а в скрипте переделать обработчики в функцию.
    Вместо:
    $("div").click(function(){
    //что-то делает
    });
    
    //переделать на:
    function function_name(){
    //что-то делает
    }

    Т.е. у тэга div при нажатии атрибут onClick вызывает эту функции. И тут без разницы, подгружен контент ajax'ом или нет.
    Если хотите в функции использовать значение $(this), то задайте в атрибуте у функции onClick="function_name(this);", а в скрипте в функции задайте событие для этого значения
    function function_name(i){
    $(i).вешаем обработчики
    //$(i) это тоже, что и $(this) у обработчика $("div").click()
    }



Надеюсь, кому-то будет полезно :)
Ответ написан
Fernus
@Fernus
Техник - Механик :)
Почему такой вариант не рассматривается?

$(document).on('click', 'element', function () {
 // .. //
});

Я так пользуюсь давно...сам когда-то натыкался на это, но так же быстро решил...оказывается это прям ВОПРОС))

Для извращенцев, вот так ещё можно:
$(document).find('element').on('click', function () {
 // .. //
});
Ответ написан
denisisaychx
@denisisaychx
Возможно обработчик события прикручен способом, не учитывающим динамически создаваемые элементы. Нужно посмотреть скрипт jquery-hover-effect.js.
Ответ написан
itspers
@itspers
А вы уверены, что именно одна строка не выполняется?
Срабатывает ли клик, уходит ли запрос, что запрос возвращает, что содержится в content...
Если "Скрипт подключен в head" и ниже полное содержание файла - клик вообще не должен срабатывать.
Ответ написан
p00h
@p00h
Фехтовальщик-стропальщик
Если элемент, к которому применяется ховер эффект, заменяется каждый раз приходящими данными (скорее всего, вы же гоняете не данные, а html?), то необходимо заменить с $('.selector').hover(..) на $('.selector').live('hover', ...)
Ответ написан
pandaWarrior
@pandaWarrior
фронтендер
Хотелось бы присоединиться к вопросу. В js разбираюсь не сильно, работаю в основном с плагинами. Проблема такова: как заставить работать плагин после подгрузки контента через Ajax? Использую Magnific-Popup, который отлично работает на уже сформированном контенте, но отказывается что-либо делать на новом. Подскажите, пожалуйста, как это поправить?
Аякс самый банальный, для подгрузки новых постов:
jQuery(function() {
	jQuery("p.load a").click(function(){ 
	        jQuery("p.load a").hide();		
		jQuery("#img_load").show();		
		jQuery.ajax({
			url: "wp-content/themes/scopic/ajaxloadpost.php",  
			type: "GET",						
			data: {"page": page},			
			cache: false,
			success: function(response){
				if(response == 0){
					alert("Больше нет записей");	
					jQuery("p.load").hide();
				}else{
					jQuery("#timeline").append(response);	
					page++;			
					jQuery("#img_load").hide();
					if(next!=0){
						jQuery("p.load a").show();
					}
				}
				
			}
		});
	});
});


До этого в коде инициализировался плагин:
$('.entry-gallery').magnificPopup({
  delegate: 'a', // child items selector, by clicking on it popup will open
  type: 'image',
  image: { titleSrc: 'title'  },
  gallery: { 
  	enabled: true ,
	navigateByImgClick: true,
  },
  // Animation
  removalDelay: 300,
  mainClass: 'mfp-fade'  
});
Ответ написан
@slavik_210
И у меня такая же проблемма. Ваш 3 вариант мне не очень нравится. А если поставить обработчик на "body" и потом отлавливать через event.target? Так не лучше будет?
Ответ написан
ildarkhasanshin
@ildarkhasanshin
developer
$('body').on('click', '.ajax_block', function () {
..
$.ajax({
..
} );
..
});

$('.ajax_block').on('click', '.button_in_ajax_block', function () {
..
});
Ответ написан
Комментировать
@evgeniy388
Всем доброго вечера, прошу помочь, есть скрипт выполняющий загрузку постов
jQuery(document).ready(function($) {
			var $container = $('#masonry');
			$container.infinitescroll({
				navSelector : '#navigation',
				nextSelector : '#navigation #navigation-next a',
				itemSelector : '.item',
				maxPage       :10,
 loading: {
			msgText: 'Заружаем',
			finishedMsg: 'Все статьи загружены',
			img: '<?php echo get_template_directory_uri(); ?>/img/loading.gif',	
	}
			},
			// trigger Masonry as a callback
			function(newElements) {
				// hide new items while they are loading
				var $newElems = $(newElements).css({
					opacity: 0});
				// ensure that images load before adding to masonry layout
				$newElems.imagesLoaded(function() {
					// show elems now they're ready
					$newElems.animate({
						opacity: 1});
					$container.masonry('appended', $newElems, true);
				});
				onAfterLoaded($newElems);
			}
			);
		});


Все хорошо. все исполняется, но в постах есть скрипт видеоплеера, и вот он в добавленых статьях не работает.
<div id='video' ></div>
<script type='text/javascript'>
    jwplayer('video').setup({
        file: 'https://youtu.be/dcDlhYPq3jk',
		  width: "100%",
       height: "100%"
    });
</script>


Всем буду благодарен за помощь.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы