调用Ajax之后，脚本无法在部分视图上运行 [英] Scripts not working on partial view after Ajax call

问题描述

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

I have called scripts on _Layout.cshtml page and my Index.cshtml page has partial view into it. So on page load, SignalR scripts working perfect on partial view, on page end I make another ajax request and load the partial view with another data filled in that and embed under already displayed data, and then the SignalR does not work on the newly embedded record.

这是我的索引页代码:

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

这是我的部分查看代码:

This is my partial View Code:

@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，当我单击喜欢"按钮时，它对其背后的函数进行了多次调用. 请帮助我解决此问题，自1周以来，我一直停留在这一点上.

Kindly help me how to resolve this issue that after making an ajax request I am not able to get those SignalR working. Here is more to say when I put the SignalR scripts on PartialView that works but it also sucks that on each ajax request there is again SignalR loaded on the page and when I click on LIke button it makes many calls to the function behind it. Kindly help me to resolve this issue, I am stuck at this point since 1 week.

这是signalR代码:

Here is signalR Code:

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

推荐答案

问题:您将事件直接绑定到元素，因此，当您删除该元素并将其替换为另一个元素时，事件就是也与该元素一起删除，这就像是强耦合.

Problem: You are binding event to elements directly, So when you remove this element and replace it with a different one the events are also removed along with that element, This is something like strongly coupled.

解决方案::使用 Jquery事件委托 .这样可以确保事件将在当前元素以及将来可能出现的所有元素上触发.

Solution: Use Jquery event delegation. This will make sure the events will be triggered on the current elements and also all the elements that can come in future.

语法如下.

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

注意:这从来不是单个问题，而是Jquery问题.

NOTE: This was never a singlaR issue, it was Jquery issue.

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

Efficient Way: The problem in using $(document).on("click"... is that when ever there is a click happening on the entire page the Jquery framework will bubble the events from the clicked element upwards(its parent, and its parent and so on..) unless the element specified in the selector arrives, So its kind of performance hit as we don't want this check's to run if we are clicking outside the required area ( button .btn.btn-sm.btn-default in this example).

因此，最佳做法是将此事件委托绑定到可能不会被删除的最接近的父对象，此问题为<div class="row infinite-scroll">.因此，仅当在此元素内发生单击时，事件冒泡才会发生，并且一旦到达父元素，事件冒泡也将停止，它起到了事件冒泡的边界的作用.

So best practice is to bind this event delegation to the closest parent possible which will not be removed, <div class="row infinite-scroll"> in this question. So that only when the click happens within this element the event bubbling will happen and also will be stopped once it reaches the parent element,it acts kind of a boundary for event bubbling.

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

这篇关于调用Ajax之后，脚本无法在部分视图上运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！