Ajax 调用后脚本在局部视图上不起作用

Question

我在 _Layout.cshtml 页面上调用了脚本，并且我的 Index.cshtml 页面有部分视图。因此，在页面加载时，SignalR 脚本在部分视图上完美运行，在页面结束时，我发出另一个 ajax 请求并加载部分视图，其中填充了另一个数据并嵌入到已显示的数据下，然后 SignalR 不适用于新嵌入记录。

这是我的索引页代码：

<div class="col-md-6">
    <div class="profile-body">            
        <div class="row infinite-scroll">
            @Html.Partial("_AlbumRow", Model)
        </div>
    </div>
</div>

这是我的部分查看代码：

@model IEnumerable<SmartKids.Lib.Core.ViewModels.FileMediaAlbumsVM>
@foreach (var item in Model)
{   
<div class="widget">
    <div class="block rounded">            
        <img src="@Url.Content(item.ImageUrl)" alt="@item.Title">
        <input type="button" data-image-id="@item.imageId" class="btn btn-sm btn-default">Like</input>
    </div>
</div>
}

请帮助我解决这个问题，即在发出 ajax 请求后我无法让那些 SignalR 工作。当我将 SignalR 脚本放在有效的 PartialView 上时，这里还有更多要说的，但它也很糟糕，在每个 ajax 请求上，页面上再次加载了 SignalR，当我单击 Like 按钮时，它会多次调用它背后的函数。 请帮我解决这个问题，自 1 周以来我一直卡在这一点上。

这里是signalR代码：

        $(".btn.btn-sm.btn-default").on("click", function () {
            var imageId = $(this).attr("data-image-id");
            albumClient.server.like(imageId);
        });

Answer 1

问题：您将事件直接绑定到元素，因此当您删除此元素并将其替换为不同的元素时，事件也会与该元素一起删除，这类似于强耦合。

解决方案：使用Jquery event delegation。这将确保事件将在当前元素以及将来可能出现的所有元素上触发。

语法如下。

$(document).on("click", ".btn.btn-sm.btn-default",function () {
    var imageId = $(this).attr("data-image-id");
    albumClient.server.like(iamgeId);
});

注意：这从来都不是单一的问题，而是 Jquery 的问题。

---

有效方式： 使用$(document).on("click"... 的问题在于，当整个页面发生点击时，Jquery 框架会将事件从被点击的元素向上冒泡（其父元素和它的父级等等..）除非选择器中指定的元素到达，所以它的性能会受到影响，因为如果我们在所需区域之外单击，我们不希望运行此检查（按钮.btn.btn-sm.btn-default在本例中） .

所以最佳实践是将此事件委托绑定到可能不会被删除的最接近的父级，<div class="row infinite-scroll"> 在这个问题中。因此，只有在此元素内发生单击时，才会发生事件冒泡，并且一旦到达父元素也会停止，它充当事件冒泡的边界。

   $('.row.infinite-scroll').on("click", ".btn.btn-sm.btn-default",function () {
        var imageId = $(this).attr("data-image-id");
        albumClient.server.like(iamgeId);
    });