编辑
我正在单击jqwidget网格列中的链接时打开一个模式,我正在使用单元格渲染器来完成此操作。但数据呈现两次。下面是单击以打开模态后的屏幕截图。
$(document).ready(function () {
var loadGrid = function (fromDate = null, toDate = null) {
$.ajax({
url: "/Home/SearchResults",
dataType: 'json',
beforeSend: function () {
$("jqxgrid").html('');
},
error: function (json, textStatus, errorThrown) {
alert(' Error :' + errorThrown);
},
data: {
fromdate: fromDate,
toDate: toDate
},
success: function (response) {
// initailize grid
var gridData = response;
window.searchData = response.SearchResults;
var gridSource =
{
localdata: gridData,
datatype: 'json'
};
var gridDataAdapter = new $.jqx.dataAdapter(gridSource);
$("#jqxgrid").jqxGrid(
{
width: 1500,
source: gridDataAdapter,
pageable: true,
autoheight: true,
pagesize: 20,
selectionmode: 'singlecell',
columns: [
{ text: 'Edit', datafield: 'Edit', width: 250, columntype: 'button', cellsrenderer: function () {
return `<a href='' data-toggle='modal' data-target='#JsonModal' id='elem' /> Get Json`},
buttonclick: function (row) {
editrow = row;
var offset = $("#jqxgrid").offset();
var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow);
selectedFirstName = dataRecord.FirstName;
}
}
]
});
}
});
}
$(document).on("hidden.bs.modal", "#JsonModal", function () {
$(this).find("#modal-content").html(""); // just clear the contents.
$(this).find("#modal-content").remove(); // remove from dom.
});
$('#JsonModal').on('shown.bs.modal', function () {
$('#JsonModal').find('.modal-body').append('<div id="modal-content">' + selectedFirstName + '</div> ');
});
});
更新:
正如一些评论者所指出的,我注意到我的jquery函数被调用了两次。
$(document).on('click', 'a[id^="elem"]', function () {
alert('hello');
});
打开警报框两次。我不清楚为什么。
检查您的页面以确保您没有在页面上两次包含jQuery。
这是一个非常常见的错误,可能会导致您在问题中描述的问题被调用/渲染两次。
使用unbind()。
$(document).unbind().on('click', 'a[id^="elem"]', function () {
alert('hello');
});
希望这会有所帮助。