我使用了一個視圖組件，其中包含一些用于影片的 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);
}
// 在控制器中
public IActionResult ChangeGallery(int id, int colorId)
{
var parameters = new GalleryInvokeParameterViewModel
{
ColorID = colorId,
ProductID = id
};
return ViewComponent("SingleProductGallery", parameters);
}
// 在 HOVER IMAGE 上縮放影像的 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)";
});
uj5u.com熱心網友回復：
我找到了解決這個問題的方法。在ajax呼叫并回傳資料后我呼叫：
$(document).ajaxComplete(function () {js code});
它再次重新加載了 JavaScript 代碼，我的影片代碼運行良好。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/492853.html
標籤：javascript 阿贾克斯 asp.net 核心 asp.net-core-viewcomponent