Ajax Anruf funktioniert nur auf der ersten Seite von WebGrid

Question

Hallo alle,

Ich habe ein WebGrid, das Seitennummerierung hat. Eine Spalte zeigt ein Symbol an, das angeklickt werden kann und einen Ajax-Aufruf auslöst. Der Ajax-Aufruf funktioniert auf der ersten Seite des Webgrids, aber auf den nächsten Seiten scheint er nicht zu funktionieren. Ich denke nicht, dass es sogar den Ajax-Aufruf trifft, das Display würde auch auf den oberen Rand der Seite springen. Kann mir jemand sagen, was ich falsch mache oder wie ich es auch auf den anderen Seiten des Webgrids funktionieren lassen kann?

var Grid = new WebGrid(canPage: true, canSort: false, rowsPerPage: 25, ajaxUpdateContainerId: "gridContent"); 
Grid.Bind(Model.DataList); 
Grid.Pager(WebGridPagerModes.NextPrevious); 

var gridColumns = new List<WebGridColumn>(); 

gridColumns.Add(PaymentGrid.Column(columnName: "WavFile", header: " ", format:@<text> 
@if (item.WavFile != null && item.WavFile != "") 
{ <a href="#" id="audiobtn" class="audiobtn"><img src="~/Content/audio.png" 
title="Download" alt="@item.WavFile" /></a> } 
else 
{ @Html.Raw("<img src=\"/Content/audiooff.png\" />") }</text>)); 
gridColumns.Add(Grid.Column(columnName: "EmployeeID", header: "EmpID")); 
gridColumns.Add(Grid.Column(columnName: "LastName", header: "Last", canSort: 
true)); 
gridColumns.Add(Grid.Column(columnName: "FirstName", header: "First", canSort: true)); 

<div id="gridContent"> 
@Grid.GetHtml(
tableStyle: "table table-striped table-hover", 
headerStyle: "", 
footerStyle: "", 
alternatingRowStyle: "", 
rowStyle: "", 
mode: WebGridPagerModes.All, 
columns: Grid.Columns(gridColumns.ToArray()) 
) 
</div> 

<script type="text/javascript"> 
$(document).ready(function() { 

$(".audiobtn").click(function (e) { 

$.ajax({ 
type: "POST", 
url: "/EmployeeInfo/VoiceAuthorization", 
data: { audio: $(this).find('img').attr('alt') }, 
async: false, 
cache: false, 
success: function (response) { 

if (e.button == 0) { 
$("#ContextMenu").css('left', e.pageX + 5); 
$("#ContextMenu").css('top', e.pageY + 5); 
$("#ContextMenu").fadeIn(100); 
} 
}, 
error: function (error) { 
alert('Invalid wav file'); 
console.log(error); 
} 
}); 

return false; 
}); 

$("#ContextMenu").click(function() { 
$("#ContextMenu").fadeOut(80); 
}); 

$(document).click(function (e) { 
if (e.target.id != 'audiobtn' && !$('#audiobtn').find(e.target).length) { 
$("#ContextMenu").hide(); 
} 
    }); 

    return false; 
    }); 
}); 

Danke

Answer 1

Es ist nicht neben dem ersten dynamisch generiert durch die Seiten arbeiten.

Ersetzen Sie den Code $(".audiobtn").click(function (e) { ... }); durch $("body").on("click", ".audiobtn", function() { .. }); und sollte funktionieren.

Answer 2

Ihr Problem ist, dass in der zweiten Gitter Seite der jquery nicht initialisiert wird, diese so tun

Änderung dieser

<a href="#" id="audiobtn" class="audiobtn"><img src="~/Content/audio.png" 
title="Download" alt="@item.WavFile" /></a> 

durch diese (a callAjax() Funktion wurde dem OnClick-Ereignis hinzugefügt)

<a href="#" id="audiobtn" class="audiobtn" onclick="callAjax(@item.WavFile)"><img src="~/Content/audio.png" 
title="Download" alt="@item.WavFile" /></a> 

Dann ist dieses

$(".audiobtn").click(function (e) { 

$.ajax({ 
type: "POST", 
url: "/EmployeeInfo/VoiceAuthorization", 
data: { audio: $(this).find('img').attr('alt') }, 
async: false, 
cache: false, 
success: function (response) { 

ändern

Durch diese

function callAjax(param) { 

$.ajax({ 
type: "POST", 
url: "/EmployeeInfo/VoiceAuthorization", 
data: { audio: param }, 
async: false, 
cache: false, 
success: function (response) {