Usé un componente de vista que tiene algunos códigos JavaScript para animaciones. cuando la página cargada, javaScript funciona bien, pero cuando se hace clic en un botón para cargar datos con ajax, los datos se cargan correctamente pero los códigos de javaScript ya no funcionan

// en el código del componente de vista

 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); }

// en el controlador

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

// en códigos javascript para imagen ZOOM EN IMAGEN HOVER // estos códigos no funcionan después de llamar a ajax para cargar datos

 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)"; });