Ajax 调用仅适用于 webgrid 的第一页答案

【问题标题】：Ajax call only working on first page of webgridAjax 调用仅适用于 webgrid 的第一页
【发布时间】：2018-03-13 17:53:39
【问题描述】：

大家好，

我有一个带有分页的 webgrid。其中一列显示一个图标，可以单击该图标并将触发 ajax 调用。 ajax 调用在 webgrid 的第一页上运行良好，但在下一页上似乎不起作用。我认为它甚至没有打 ajax 调用，显示也会跳到页面顶部。有人可以告诉我我做错了什么，或者我怎样才能让它在 webgrid 的其他页面上也能正常工作？

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

谢谢

【问题讨论】：

标签： jquery ajax asp.net-mvc pagination webgrid

【解决方案1】：

由于第一个页面旁边的页面是动态生成的，因此无法正常工作。

将代码 $(".audiobtn").click(function (e) { ... }); 替换为 $("body").on("click", ".audiobtn", function () { .. }); 应该可以工作。

【讨论】：

我正在尝试实现同样的事情，但我想让 webgrid 行可点击而不是按钮。这适用于按钮，但不适用于 webgrid 行。它仅适用于第一页，但不适用于其他页面。

【解决方案2】：

您的问题是在第二个网格页面中 jquery 没有初始化，所以这样做

改变这个

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

由此（在 onClick 事件中添加了 callAjax() 函数）

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

那就改这个

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

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

由此

function callAjax(param) {

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

【讨论】：