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

Question

[ivetta]

На странице реализована фильтрация товаров через 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 запроса?

Answer 1

[Евгений Генералов]

Добрый день.
Может это конечно и некропост, но все же я хотел написать по поводу 2го пункта, про событие jQuery.on().
Везде написано

$("div").on("click", function(){
/** что то делается **/
})

Но более точное и правильное я нашел в сети, чтобы скрипт отрабатывал именно на подгруженных ajax элементах:

$('ближайший_родительский_и_статический_элемент').on('событие', 'динамически_подгруженный_елемент', function(){
    // действия, которые надо выполнить
});

Comments

[Big_Trouble]

Ох что бы я без вас делал, уже весь гугл облазил в поисках. Спасибо!

[menolas]

спасибо - сильно помогло))

[mirti de vednis]

Спасибо!

[MyQuestion]

Спасибо! )

Answer 2

[Антон]

Решено! 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()
   }

   
   

Надеюсь, кому-то будет полезно :)

Comments

[Игорь]

Спасибо, все не мог понять почему не отрабатывает клик

[GreenMan1899]

спасибо большое

[XdHideoAppa]

Ты гений, спасибо!

Answer 3

[N]

Почему такой вариант не рассматривается?

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

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

Для извращенцев, вот так ещё можно:

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

Comments

[mirti de vednis]

Спасибо, по всякому уже пробовал, это помогло!

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

[menolas]

вот то что для извращенцев первое попробовала - не помогло, а первый случай, он же описанный в предыдущем посте - помогло - спасибо всем тем кому не лень тут писать

[NiTROi]

Спасибо, помогло)

[qwanya]

Господи, наконец то я это нашел...

[MyQuestion]

Спасибо!

Answer 4

[Denis Isaychenko]

Возможно обработчик события прикручен способом, не учитывающим динамически создаваемые элементы. Нужно посмотреть скрипт jquery-hover-effect.js.

Comments

[ivetta]

@denisisaychx вот код скрипта

(function( $, undefined ) {
$.HoverDir = function( options, element ) {
this.$el = $( element );
this._init( options );
};
$.HoverDir.defaults = {
hoverDelay : 0,
reverse : false
};
$.HoverDir.prototype = {
_init : function( options ) {
this.options = $.extend( true, {}, $.HoverDir.defaults, options );
// load the events
this._loadEvents();
},
_loadEvents : function() {
var _self = this;
this.$el.on( 'mouseenter.hoverdir, mouseleave.hoverdir', function( event ) {

var $el = $(this),
evType = event.type,
$hoverElem = $el.find( 'article' ),
direction = _self._getDir( $el, { x : event.pageX, y : event.pageY } ),
hoverClasses= _self._getClasses( direction );
$hoverElem.removeClass();
if( evType === 'mouseenter' ) {
$hoverElem.hide().addClass( hoverClasses.from );
clearTimeout( _self.tmhover );
_self.tmhover = setTimeout( function() {
$hoverElem.show( 0, function() {
$(this).addClass( 'da-animate' ).addClass( hoverClasses.to );
} );

}, _self.options.hoverDelay );
}
else {
$hoverElem.addClass( 'da-animate' );
clearTimeout( _self.tmhover );
$hoverElem.addClass( hoverClasses.from );
}
} );
},
// credits : stackoverflow.com/a/3647634
_getDir : function( $el, coordinates ) {
/** the width and height of the current div **/
var w = $el.width(),
h = $el.height(),
/** calculate the x and y to get an angle to the center of the div from that x and y. **/
/** gets the x value relative to the center of the DIV and "normalize" it **/
x = ( coordinates.x - $el.offset().left - ( w/2 )) * ( w > h ? ( h/w ) : 1 ),
y = ( coordinates.y - $el.offset().top - ( h/2 )) * ( h > w ? ( w/h ) : 1 ),
/** the angle and the direction from where the mouse came in/went out clockwise (TRBL=0123);**/
/** first calculate the angle of the point,
add 180 deg to get rid of the negative values
divide by 90 to get the quadrant
add 3 and do a modulo by 4 to shift the quadrants to a proper clockwise TRBL (top/right/bottom/left) **/
direction = Math.round( ( ( ( Math.atan2(y, x) * (180 / Math.PI) ) + 180 ) / 90 ) + 3 ) % 4;
return direction;
},
_getClasses : function( direction ) {
var fromClass, toClass;
switch( direction ) {
case 0:
// from top
( !this.options.reverse ) ? fromClass = 'da-slideFromTop' : fromClass = 'da-slideFromBottom';
toClass = 'da-slideTop';
break;
case 1:
// from right
( !this.options.reverse ) ? fromClass = 'da-slideFromRight' : fromClass = 'da-slideFromLeft';
toClass = 'da-slideLeft';
break;
case 2:
// from bottom
( !this.options.reverse ) ? fromClass = 'da-slideFromBottom' : fromClass = 'da-slideFromTop';
toClass = 'da-slideTop';
break;
case 3:
// from left
( !this.options.reverse ) ? fromClass = 'da-slideFromLeft' : fromClass = 'da-slideFromRight';
toClass = 'da-slideLeft';
break;
};
return { from : fromClass, to: toClass };
}
};
var logError = function( message ) {
if ( this.console ) {
console.error( message );
}
};
$.fn.hoverdir = function( options ) {

if ( typeof options === 'string' ) {
var args = Array.prototype.slice.call( arguments, 1 );
this.each(function() {
var instance = $.data( this, 'hoverdir' );
if ( !instance ) {
logError( "cannot call methods on hoverdir prior to initialization; " +
"attempted to call method '" + options + "'" );
return;
}
if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {
logError( "no such method '" + options + "' for hoverdir instance" );
return;
}
instance[ options ].apply( instance, args );
});
}
else {
this.each(function() {
var instance = $.data( this, 'hoverdir' );
if ( !instance ) {
$.data( this, 'hoverdir', new $.HoverDir( options, this ) );
}
});
}
return this;
};
})( jQuery );

[Denis Isaychenko]

this.$el.on( 'mouseenter.hoverdir, mouseleave.hoverdir' — проблема скорее всего кроется в этой строке. Обработчик вешается на элемент this.$el = $(element) и не учитывает динамически создаваемые елементы. jsfiddle.net/RcrH8 — здесь я примерно показал принцип. При добавлении Item, обработчик на них уже не действует. Но если заменить первую строку $('a').on('mouseenter mouseleave', function() … на $('body').on('mouseenter mouseleave', 'a', function() … то обработчик учтёт динамически создаваемые елементы. В вашем случае можно попробовать заменить this.$el = $(element) на this.$el = $('body') и this.$el.on( 'mouseenter.hoverdir, mouseleave.hoverdir', function( event ) {… на this.$el.on( 'mouseenter.hoverdir, mouseleave.hoverdir', element, function( event ) {…

[Denis Isaychenko]

@ivetta ↑

[ivetta]

@denisisaychx
Спасибо. Почти помогло :-)
Если пишу так:
this.$el = $('body');
.................................
this.$el.on( 'mouseenter.hoverdir, mouseleave.hoverdir', function(event) {
.....
работает и после выполнения ajax, но mouseenter.hoverdir отрабатывает сразу на всех элементах списка.

Если добавляю element, то не работает вообще.
Буду дальше эксперементировать :-)

[Denis Isaychenko]

@ivetta Получилось с экспериментами? :)

[ivetta]

Эх, к сожалению нет. :-(

[ivetta]

@denisisaychx Самое интересное, что попыталась вставить скрипт:
$('body').on('mouseenter mouseleave','.da-thumbs', function(e) {

if($(this).find('article').is( ":hidden" ))
{
$(this).find('article').stop(true).slideDown( "slow" );
}
else
{
$(this).find('article').stop(true).slideUp();
}

});
И он тоже после аякс не работает.
Видимо у меня все-таки косяк в чем-то другом....

[Denis Isaychenko]

@ivetta На самом деле странный скрипт. =) Если используется 2 обработчика то можно было без проверок просто $(this).find('article').stop(true).slideToggle( ); А вообще посмотреть бы live версию происходящего и консоль.

[ivetta]

@denisisaychx Это мои первые шаги в jquery :-)
Страничка, где сиё реализовано вот merlindom.ru/shop/living-room/armchairs
За основу был взять готовый шаблон со скриптами и к нему уже прикручивалась ajax обработка формы фильтра.

[Denis Isaychenko]

@ivetta Вот ссылка на страницу плагина на гитхабе https://github.com/codrops/DirectionAwareHoverEffect, попробуйте новую версию плагина скачать. =)

[Denis Isaychenko]

Там запятую в ссылке случайно поставил.

[ivetta]

попробовала. не помогло :-(

Answer 5

[itspers]

А вы уверены, что именно одна строка не выполняется?
Срабатывает ли клик, уходит ли запрос, что запрос возвращает, что содержится в content...
Если "Скрипт подключен в head" и ниже полное содержание файла - клик вообще не должен срабатывать.

Comments

[ivetta]

Запрос отрабатывает, возвращает, то что нужно.

Answer 6

[Dmitry Tallmange]

Если элемент, к которому применяется ховер эффект, заменяется каждый раз приходящими данными (скорее всего, вы же гоняете не данные, а html?), то необходимо заменить с $('.selector').hover(..) на $('.selector').live('hover', ...)

Comments

[Сергей Протько]

.live имеет статус deprecated. Используйте делегаты с .on

[Dmitry Tallmange]

Оп) давненько я не брал в руки jquery, спасибо, надо освежить память

[jurasarts]

При чем лучше использовать делегат .on(event, function()) всегда, чтобы потом не было вот таких проблем.

Answer 7

[Алёна]

Хотелось бы присоединиться к вопросу. В 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'  
});

Comments

[Алёна]

Решилось дублированием кода в аякс-запросе. Может существует какой-то более подходящий вариант?

Answer 8

[Вячеслав]

И у меня такая же проблемма. Ваш 3 вариант мне не очень нравится. А если поставить обработчик на "body" и потом отлавливать через event.target? Так не лучше будет?

Comments

[Антон]

Можно конечно. Но обработчики ставятся к крайнем случае. Т.е. у вас на каждом клике будет делаться проверка. А в 3 варианте непосредственно при нажатии на этот элемент. Если сайт требователен к скорости и коммерческий - я бы не рекомендовал.

Answer 9

[ildar r. khasanshin]

$('body').on('click', '.ajax_block', function () {
..
$.ajax({
..
} );
..
});

$('.ajax_block').on('click', '.button_in_ajax_block', function () {
..
});

Answer 10

[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>

Всем буду благодарен за помощь.

Answer 11

[Максим Столповских]

Всем привет! Сайт на вордпресс, кастомные типы полей, таксономии + установлен фильтр, который обновляет содержимое блока в режиме реального времени через ajax. Потребовалось в полях с ценой после тысяч ставить запятую, чтобы смотрелось удобнее. Нашёл и установил через снипет скрипт, который с первого взгляда сразу завёлся - запятые появились, но потом вылезла проблема как у автора - после применения любого фильтра эта запятая пропадает и больше не появляется до первой перезагрузки страницы. Вопрос - может ли кто-то помочь поправить код? По ощущениям требуется, чтобы вместе с каждым ответом ajax дополнительно прогружался этот скрипт, отвечающий за запятые.

<script>
jQuery(function($){
   function numberWithCommas(number) {
    var parts = number.toString().split(".");
    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    return parts.join(".");
}
  $(document).ready(function() {
		$("#thousand-separator p").each(function() {
			var num = $(this).text();
			var commaNum = numberWithCommas(num);
			$(this).text(commaNum);
		});
	});
});
</script>