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);
    });

Ajax 调用后脚本无法在部分视图上运行

Scripts not working on partial view after Ajax call

ajax

asp.net-mvc

signalr