ajax - Ajax 调用后脚本在局部 View 上不起作用

Question

我在 _Layout.cshtml 页面上调用了脚本，并且我的 Index.cshtml 页面有部分 View 。因此，在页面加载时，SignalR 脚本在部分 View 上完美运行，在页面结束时，我发出另一个 ajax 请求并加载部分 View ，其中填充了另一个数据并嵌入已显示的数据下，然后 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

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

解决方法:使用 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 在此示例中)，我们不希望运行此检查。

所以最佳实践是将此事件委托(delegate)绑定(bind)到可能不会被删除的最接近的父级，<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);
    });