Javascript/JQuery .load 后未触发函数

Question

当用户单击我的 ASP.NET 应用程序中的 "search" 按钮时，将加载临时 "spinner" div。然后，当搜索（最终）完成时，微调器 div 的内容将替换为 SubmitSearch 方法返回的 HTML。

$("#spinner").load("@Url.Action("SubmitSearch","Search")");

我还有这个 JavaScript 文件加载到：

$(document).ready(function() {
    $(".card--result").hover(function () {
        alert("hover");
        $(this).css('cursor', 'pointer');
    });

    $(".card--result").click(function() {
        var url = $(this).attr('data-url');
        window.open(url, "_self");
    });
});

但是，问题是带有 card--result class 的 div 是在 [=15= 之后添加到页面的新 HTML 的一部分] 方法成功。

如何注册 .hover 和 .click 函数，以便在新加载的 HTML 元素上实际触发它们？

Answer 1

为此你需要 event delegation。

Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.

$(document).on("click", ".card--result", function() {
   var url = $(this).attr('data-url');
   window.open(url, "_self");
});

对于光标部分，我想 CSS 就足够了

.card--result {
   cursor: pointer;
}

Javascript/JQuery .load 后未触发函数

Javascript/JQuery function not triggered after .load

html

javascript

jquery

jquery-click-event

jquery-hover