腳本在Ajax調用後不能在局部視圖上工作

我在_Layout.cshtml頁面上調用了腳本，而我的Index.cshtml頁面中有部分視圖。因此，在頁面加載時，SignalR腳本在部分視圖上完美工作，在頁面結束時，我做了另一個Ajax請求，並用另一個填充的數據加載部分視圖，並嵌入已經顯示的數據下，然後SignalR不會在新嵌入記錄。腳本在Ajax調用後不能在局部視圖上工作

這是我的索引頁代碼：

<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工作。當我將PartialView上的SignalR腳本放在工作區中時，更多的是說，但是它也吸引了每一個Ajax請求，並且再次在頁面上加載SignalR，當我點擊LIKE按鈕時，它會對它後面的函數進行多次調用。請幫助我解決這個問題，自1周以來我一直堅持這一點。

這裏是signalR代碼：

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

來源

2016-10-26 usman

當你說SingnalR正在處理第一個局部視圖，而不是從ajax得到的視圖，什麼是不工作？你的代碼必須工作？ –

SignalR適用於加載頁面加載的PartialView，並且當我通過ajax調用再次追加該部分視圖時，SignalR不起作用，並且我調用Like函數，顯示按鈕單擊時的實時喜歡，這些不適用於通過ajax調用附加的部分視圖。希望現在能清楚 – usman

你能告訴我們singnalR代碼嗎？ –

問題：您直接綁定事件的元素，所以當你刪除此元素，並用一個不同的事件也與該元素一起被除去更換，這是像強烈耦合的東西。

解決方案：使用Jquery event delegation。這將確保事件將在當前元素上觸發，並且還會觸發未來可能發生的所有元素。

語法如下。

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

注：這從來就不是一個問題singlaR，這是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); 
    });

來源

2016-10-26 12:37:49

謝謝@Reddy你救了我的日子 – usman

很高興我能幫忙..快樂編碼 –

感謝@Reddy其工作我 – adnan

腳本在Ajax調用後不能在局部視圖上工作

回答

相關問題