Question

当用户单击我的ASP.NET应用程序中的“搜索”按钮时，将加载一个临时的“ 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类的div是新的HTML的一部分，该新HTML在.load方法成功后被添加到页面中。

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

Answer 1

您需要event delegation。

事件委托允许我们将单个事件侦听器附加到父元素，它将为所有与a匹配的后代触发选择器，无论这些后代现在存在还是被添加到未来。

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

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

.card--result {
   cursor: pointer;
}

.load之后未触发Javascript / JQuery函数

1 个答案: