Ajax 调用仅在 webgrid 的第一页上工作

Question

大家好，

我有一个带有分页的网络网格。其中一列显示一个图标，单击该图标将触发 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;
    });
});

谢谢

Answer 1

它不起作用，因为第一个页面是动态生成的。

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

Answer 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) {

Ajax 调用仅在 webgrid 的第一页上工作

Ajax call only working on first page of webgrid

ajax

asp.net-mvc

jquery

pagination

webgrid