Почему к результатам AJAX не применяется JS-скрипт?

Question

[shobique]

При загрузке страницы в DIV сразу грузятся карточки курсов (пример карточки ниже). При наведении на неё включается css и js-анимация. Но проблема в том, что при осуществлении поиска курса, и выгрузке карточек найденных курсов на страницу, на карточках перестаёт работать именно js-анимация, только css-анимация работает. Выгрузка реализована через jquery-ajax. Интересно, что кроме этого перестаёт работать на карточке popover от bootstrap. Подскажите, в чём может быть причина?

<a class="card" href="/course/2/informatika-dlya-8go-klassa/">
		<div class="card-cover" style="background-image: url(/wp-content/uploads/Web-Hosting-1024x653.jpg);">                            						
                        <span class="label label-action la-new">Новинка</span>
		</div>
		<div class="card-block">

			<figure class="profile" style="background-image: url(https://www.sut.ru/templates/beez_20/favicon.ico);" data-toggle="popover" data-trigger="hover" data-placement="top" title="" data-content="Школа №83" data-original-title="Учебное заведение"></figure>
			<h4 class="card-title mt-3">Информатика для 8го класса</h4>
			<div class="card-text">Tawshif is a web designer living in Bangladesh.</div>
			<div class="overlay-gradient-white"></div>

		</div>
		<div class="card-footer">

			<i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star-half-o" aria-hidden="true"></i>
			<span class="pull-right"><i class="fa fa-users" aria-hidden="true"></i> 2324</span>

		</div>
	</a>

<script>
		$(document).ready(function(){
			var $window = $(window); //You forgot this line in the above example
			$("header[data-type='background']").each(function(){
				var $bgobj = $(this); // assigning the object
				$(window).scroll(function() {
					var yPos = -($window.scrollTop() / $bgobj.data("speed"));
					var coords = "50% "+ yPos + "px";
					//var coords_2 = "0% "+ (yPos)/10 + "px";

					var yPosBlr = ($window.scrollTop()/50);
					var blr = "blur("+ yPosBlr + "px)";

					var yPosOpacity = (50 + ($window.scrollTop())/10).toFixed();
					var pct = "rgba(52, 73, 94, 0."+ yPosOpacity + ")";
					var yPosOpacity_f = ((100-($window.scrollTop()/2))/100).toFixed(2);
					var pct_f = "rgba(255, 255, 255, "+ yPosOpacity_f + ")";

					$bgobj.css({ backgroundPosition: coords });
					//$(".profile .card .header-bg").css({ backgroundPosition: coords_2 });

					if (yPosBlr < 10) { $(".overlay .container").css({ "-webkit-filter": blr, "-moz-filter": blr, "filter": blr }); }
					if (yPosOpacity > 100) { yPosOpacity = 100; }
					if (yPosOpacity < 100) { $("header .overlay").css({ background: pct }); }
					if (yPosOpacity_f < 100) { $("header").css({ color: pct_f }); }
					if (yPosOpacity_f < 100) { $(".label").css({ opacity: pct_f }); }
					//$(".btn-primary").html(pct_f);
				});
			});
			$(".card").hover(
				function(){
					$(this).find(".card-block").css({ "margin-top": "-100px" });
					$(this).find(".card-text").css({ "height": "215px" });
					blr = "blur(3px)";
                    $(this).find(".card-cover").css({ "-webkit-filter": blr, "-moz-filter": blr, "filter": blr });
                    $(this).find(".card-cover .label-price").css({ "margin-right": "-170px" });
                    $(this).find(".card-cover .label-action").css({ "margin-left": "-170px" });
                    $(this).find(".card-footer").css({ "padding": "0 1em 0em" });
				},
				function(){
					$(this).find(".card-block").css({ "margin-top": "0px" });
					$(this).find(".card-text").css({ "height": "115px" });
					blr = "blur(0px)";
					$(this).find(".card-cover").css({ "-webkit-filter": blr, "-moz-filter": blr, "filter": blr });
                    $(this).find(".card-cover .label-price").css({ "margin-right": "0px" });
                    $(this).find(".card-cover .label-action").css({ "margin-left": "0px" });
                    $(this).find(".card-footer").css({ "padding": "0 1em .75em" });
				}
			);

		});

	</script>

Answer 1

[shobique]

Немного исправил. Без этой правки, карточка курса возвращается в исходное состояние, только когда курсор выходит за пределы страницы. Спасибо!

$(document).on("mouseenter", ".card", function() {
			// анимация
		}).on('mouseleave', ".card", function() {
			// анимация
		});

Comments

[Александр]

да, я забыл во втором on указать селектор.

[shobique]

Александр, а вы могли бы прокомментировать свой ответ? Почему возникала такая проблема и как её избежать в последующем?

[Александр]

shobique, вот достаточно понятное объяснение

Answer 2

[Александр]

$(document).on('mouseenter', '.card', function() {
  // анимация
}).on('mouseleave', '.card', function() {
  // анимация  
});

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