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调用

1 个答案: