使用Ajax加载视图组件时，视图组件JavaScript代码不工作

Question

我使用了具有一些动画的JavaScript代码的视图组件。 加载页面时的JavaScript运行良好，但是单击按钮将数据加载到Ajax时， 正确加载的数据，但JavaScript代码不再起作用

//

   public async Task<IViewComponentResult> InvokeAsync(GalleryInvokeParameterViewModel par)
    {
    var gallery = await _productService.GetGalleriesForSingleProductAsync(par.ProductID,par.ColorID);
    ViewBag.mainImage = await _productService.GetMainImageGalleryForSingleProductAsync(par.ProductID, par.ColorID);
    ViewBag.productId = par.ProductID;
    return View("SingleProductGallery",gallery);
    }

在controller //中in Controller

    public IActionResult ChangeGallery(int id, int colorId)
{
var parameters = new GalleryInvokeParameterViewModel
{
ColorID = colorId,
ProductID = id
};
return ViewComponent("SingleProductGallery", parameters);
}

//在javascript代码中in javascript代码缩放图像中的缩放图像 //这些代码在调用Ajax加载数据后不起作用

    var zoomArea = document.getElementById("zoom-area");
var zoomImage = document.getElementById("zoom-image");
zoomArea.addEventListener("mousemove", function (event) {
var clientX = event.clientX - zoomArea.offsetLeft;
var clientY = event.clientY - zoomArea.offsetTop;
var aWidth = zoomArea.offsetWidth;
var aHeight = zoomArea.offsetHeight;
clientX = (clientX / aWidth) * 100;
clientY = (clientY / aHeight) * 100;
zoomImage.style.transform =
"translate(-" + clientX + "% , -" + clientY + "%) scale(1.5)";
});
$(zoomArea).mouseleave(function () {
zoomImage.style.transform = "translate(-50% , -50%) scale(1)";
});

Answer 1

我找到了这个问题的解决方案。
AJAX打电话和返回数据后，我致电：

        $(document).ajaxComplete(function () {js code});

它再次重新加载JavaScript代码，我的动画代码效果很好。