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>

由此（一个callAjax（）函数被添加到onClick事件）

<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的第一页

2 个答案: