我是stackoverflow的新手，如果格式不符合预期，我深感抱歉。
请在下面为我所遇到的一个小要求之一尝试创建页面。这是精简版，但足以证明问题所在。
对于表中的每一行，如果展开了详细视图，则“显示日志”假设调用一个模式窗口显示事件以获取日志消息。但是，如果我们仅扩展一行并单击显示日志，则不会触发模态显示事件，而如果您扩展另一行并单击显示日志，则显示事件将在任何地方开始起作用。
如何解决此问题。我是Web开发的新手，不幸的是Js或Jquery知识有限。 任何指导都会有所帮助。 谢谢
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex">
<title> Show Logs</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css">
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
<style type='text/css'>
.row-index {
width: 50px;
display: inline-block;
}
</style>
<script type='text/javascript'>
$(window).load(function() {
var table1_data = [{
'Environment': 'prod',
'Workflow': 'w1'
},
{
'Environment': 'prod',
'Workflow': 'w2'
},
{
'Environment': 'prod',
'Workflow': 'w3'
},
{
'Environment': 'prod',
'Workflow': 'w4'
},
{
'Environment': 'prod',
'Workflow': 'w5'
},
{
'Environment': 'prod',
'Workflow': 'w6'
}
];
var table1_columns = [{
'field': 'Environment',
'title': 'Environment',
'sortable': true,
'visible': false
},
{
'field': 'Workflow',
'title': 'Workflow',
'sortable': true,
'visible': true
}
];
var table2_data = [{
'Environment': 'test',
'Workflow': 'w1'
},
{
'Environment': 'test',
'Workflow': 'w2'
},
{
'Environment': 'test',
'Workflow': 'w3'
},
{
'Environment': 'test',
'Workflow': 'w4'
},
{
'Environment': 'test',
'Workflow': 'w5'
}
];
var table2_columns = [{
'field': 'Environment',
'title': 'Environment',
'sortable': true,
'visible': false
},
{
'field': 'Workflow',
'title': 'Workflow',
'sortable': true,
'visible': true
}
];
$(function() {
$('#table1').bootstrapTable({
data: table1_data,
columns: table1_columns
});
$('#table2').bootstrapTable({
data: table2_data,
columns: table2_columns
});
});
});
function prepare_run_date_table(index, row) {
var html = [];
var var_full_json = [{
'Environment': 'prod',
'Graph': 'graph',
'Log': 'log1',
'Log_File': {
'file': ['No Errors!'],
'status': '00FF00'
},
'Path': 'path1',
'Run_Date': '2018-08-30',
'Server': 's1',
'Workflow': 'w1',
'index': 1114.0
},
{
'Environment': 'prod',
'Graph': 'graph',
'Log': 'log2',
'Log_File': {
'file': ['No Errors!'],
'status': '00FF00'
},
'Path': 'path2',
'Run_Date': '2018-08-29',
'Server': 's1',
'Workflow': 'w2',
'index': 1113.0
},
{
'Environment': 'prod',
'Graph': 'graph',
'Log': 'log3',
'Log_File': {
'file': ['No Errors!'],
'status': '00FF00'
},
'Path': 'path3',
'Run_Date': '2018-08-28',
'Server': 's1',
'Workflow': 'w3',
'index': 1112.0
},
{
'Environment': 'prod',
'Graph': 'graph',
'Log': 'log4',
'Log_File': {
'file': ['No Errors!'],
'status': '00FF00'
},
'Path': 'path4',
'Run_Date': '2018-08-27',
'Server': 's1',
'Workflow': 'w3',
'index': 1111.0
},
{
'Environment': 'prod',
'Graph': 'graph',
'Log': 'log5',
'Log_File': {
'file': ['No Errors!'],
'status': '00FF00'
},
'Path': 'path5',
'Run_Date': '2018-08-26',
'Server': 's2',
'Workflow': 'w4',
'index': 1110.0
},
{
'Environment': 'prod',
'Graph': 'graph',
'Log': 'log1',
'Log_File': {
'file': ['No Errors!'],
'status': '00FF00'
},
'Path': 'path1',
'Run_Date': '2018-08-30',
'Server': 's1',
'Workflow': 'w1',
'index': 1114.0
},
{
'Environment': 'test',
'Graph': 'graph',
'Log': 'log2',
'Log_File': {
'file': ['No Errors!'],
'status': '00FF00'
},
'Path': 'path2',
'Run_Date': '2018-08-29',
'Server': 's1',
'Workflow': 'w2',
'index': 1113.0
},
{
'Environment': 'test',
'Graph': 'graph',
'Log': 'log3',
'Log_File': {
'file': ['No Errors!'],
'status': '00FF00'
},
'Path': 'path3',
'Run_Date': '2018-08-28',
'Server': 's1',
'Workflow': 'w3',
'index': 1112.0
},
{
'Environment': 'test',
'Graph': 'graph',
'Log': 'log4',
'Log_File': {
'file': ['No Errors!'],
'status': '00FF00'
},
'Path': 'path4',
'Run_Date': '2018-08-27',
'Server': 's1',
'Workflow': 'w3',
'index': 1111.0
},
{
'Environment': 'test',
'Graph': 'graph',
'Log': 'log5',
'Log_File': {
'file': ['No Errors!'],
'status': '00FF00'
},
'Path': 'path5',
'Run_Date': '2018-08-26',
'Server': 's2',
'Workflow': 'w4',
'index': 1110.0
}
]
var var_env = '';
var var_workflow = '';
var var_run_date = 'Run Date';
$('#logModal').on('shown.bs.modal', function(event) {
var getLogFromRow = $(event.relatedTarget).find('td:nth-child(3)').text();
$(this).find('#logDetails').html($('<p>' + getLogFromRow + '</p>'))
});
$.each(row, function(key, value) {
if (key == 'Environment') {
var_env = value;
}
var_workflow = '';
if (key == 'Workflow') {
var_workflow = value;
}
html.push('<p><b>' + key + ':</b> ' + value + '</p>');
});
html.push('<div class="container">');
html.push('<table id="tb" class="test" border=1 style="width:auto" >');
html.push('<tr><th><b>Run Date</b></th><th>Server</th><th style="display:none;">Logs</th><th>Log</th></tr>');
var counter = 0;
for (i in var_full_json) {
if (var_full_json[i].Environment == var_env && var_full_json[i].Workflow == var_workflow) {
html.push('<tr data-id="' + counter + '" data-toggle="modal" data-target="#logModal"><td bgcolor=#"' + var_full_json[i].Log_File.status + '">');
html.push(var_full_json[i].Run_Date);
html.push('</td>');
html.push('<td>');
html.push(var_full_json[i].Server);
html.push('</td>');
html.push('<td style="display:none;">');
html.push(var_full_json[i].Log_File.file);
html.push('</td>');
html.push('<td>');
html.push('<u>Show Log</u>');
html.push('</p></td></tr>');
counter += 1
}
// break after last 7 runs
if (counter == 7) break;
}
html.push('</table>');
//Modal window code
html.push('<div id="logModal" class="modal fade" role="dialog" aria-labelledby="logModal" aria-hidden="true">');
html.push('<div class="modal-dialog">');
html.push('<div class="modal-content">');
html.push('<div class="modal-header">');
html.push('<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>');
html.push('<h3>Error Log :</h3>');
html.push('</div>');
html.push('<div id="logDetails" class="modal-body">'+' '+'</div>');
html.push('<div class="modal-footer">');
html.push('<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>');
html.push('</div>');
html.push('</div>');
html.push('</div>');
html.push('</div>');
html.push('</div>');
return html.join('');
} // detailformatter end
</script>
</head>
<body>
<div class="container" style="padding: 10px; ">
<h1>Runs</h1>
<br/>
<div id="toolbar"></div>
<div class="col-xs-6">
<h2>test 1</h2>
<table class="w3-table w3-striped" id="table1" data-toggle="true" data-toolbar="#toolbar" data-search="true" data-show-columns="true" data-pagination="true" data-height="auto" data-width="auto" data-detail-formatter="prepare_run_date_table" data-show-refresh="true"
data-detail-view="true" data-id-field="Workflow" data-show-toggle="true" data-tooltip="true">
</table>
<div class="footer">
<p> Click on '+' to see last 7 runs </p>
</div>
</div>
<div class="col-xs-6">
<h2>test 2</h2>
<table class="w3-table w3-striped" id="table2" data-toggle="true" data-toolbar="#toolbar" data-search="true" data-show-columns="true" data-pagination="true" data-height="auto" data-detail-formatter="prepare_run_date_table" data-show-refresh="true" data-detail-view="true"
data-id-field="Workflow" data-show-toggle="true" data-tooltip="true">
</table>
<div class="footer">
<p> Click on '+' to see last 7 runs </p>
</div>
</div>
</div>
</body>
</html>
答案 0 :(得分：0)
使用委托事件处理程序，该消息将首先显示。
$('body').on('shown.bs.modal','#logModal', function(event) { ... }
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex">
<title> Show Logs</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css">
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
<style type='text/css'>
.row-index {
width: 50px;
display: inline-block;
}
</style>
<script type='text/javascript'>
$(window).load(function() {
var table1_data = [{
'Environment': 'prod',
'Workflow': 'w1'
},
{
'Environment': 'prod',
'Workflow': 'w2'
},
{
'Environment': 'prod',
'Workflow': 'w3'
},
{
'Environment': 'prod',
'Workflow': 'w4'
},
{
'Environment': 'prod',
'Workflow': 'w5'
},
{
'Environment': 'prod',
'Workflow': 'w6'
}
];
var table1_columns = [{
'field': 'Environment',
'title': 'Environment',
'sortable': true,
'visible': false
},
{
'field': 'Workflow',
'title': 'Workflow',
'sortable': true,
'visible': true
}
];
var table2_data = [{
'Environment': 'test',
'Workflow': 'w1'
},
{
'Environment': 'test',
'Workflow': 'w2'
},
{
'Environment': 'test',
'Workflow': 'w3'
},
{
'Environment': 'test',
'Workflow': 'w4'
},
{
'Environment': 'test',
'Workflow': 'w5'
}
];
var table2_columns = [{
'field': 'Environment',
'title': 'Environment',
'sortable': true,
'visible': false
},
{
'field': 'Workflow',
'title': 'Workflow',
'sortable': true,
'visible': true
}
];
$(function() {
$('#table1').bootstrapTable({
data: table1_data,
columns: table1_columns
});
$('#table2').bootstrapTable({
data: table2_data,
columns: table2_columns
});
});
});
function prepare_run_date_table(index, row) {
var html = [];
var var_full_json = [{
'Environment': 'prod',
'Graph': 'graph',
'Log': 'log1',
'Log_File': {
'file': ['No Errors!'],
'status': '00FF00'
},
'Path': 'path1',
'Run_Date': '2018-08-30',
'Server': 's1',
'Workflow': 'w1',
'index': 1114.0
},
{
'Environment': 'prod',
'Graph': 'graph',
'Log': 'log2',
'Log_File': {
'file': ['No Errors!'],
'status': '00FF00'
},
'Path': 'path2',
'Run_Date': '2018-08-29',
'Server': 's1',
'Workflow': 'w2',
'index': 1113.0
},
{
'Environment': 'prod',
'Graph': 'graph',
'Log': 'log3',
'Log_File': {
'file': ['No Errors!'],
'status': '00FF00'
},
'Path': 'path3',
'Run_Date': '2018-08-28',
'Server': 's1',
'Workflow': 'w3',
'index': 1112.0
},
{
'Environment': 'prod',
'Graph': 'graph',
'Log': 'log4',
'Log_File': {
'file': ['No Errors!'],
'status': '00FF00'
},
'Path': 'path4',
'Run_Date': '2018-08-27',
'Server': 's1',
'Workflow': 'w3',
'index': 1111.0
},
{
'Environment': 'prod',
'Graph': 'graph',
'Log': 'log5',
'Log_File': {
'file': ['No Errors!'],
'status': '00FF00'
},
'Path': 'path5',
'Run_Date': '2018-08-26',
'Server': 's2',
'Workflow': 'w4',
'index': 1110.0
},
{
'Environment': 'prod',
'Graph': 'graph',
'Log': 'log1',
'Log_File': {
'file': ['No Errors!'],
'status': '00FF00'
},
'Path': 'path1',
'Run_Date': '2018-08-30',
'Server': 's1',
'Workflow': 'w1',
'index': 1114.0
},
{
'Environment': 'test',
'Graph': 'graph',
'Log': 'log2',
'Log_File': {
'file': ['No Errors!'],
'status': '00FF00'
},
'Path': 'path2',
'Run_Date': '2018-08-29',
'Server': 's1',
'Workflow': 'w2',
'index': 1113.0
},
{
'Environment': 'test',
'Graph': 'graph',
'Log': 'log3',
'Log_File': {
'file': ['No Errors!'],
'status': '00FF00'
},
'Path': 'path3',
'Run_Date': '2018-08-28',
'Server': 's1',
'Workflow': 'w3',
'index': 1112.0
},
{
'Environment': 'test',
'Graph': 'graph',
'Log': 'log4',
'Log_File': {
'file': ['No Errors!'],
'status': '00FF00'
},
'Path': 'path4',
'Run_Date': '2018-08-27',
'Server': 's1',
'Workflow': 'w3',
'index': 1111.0
},
{
'Environment': 'test',
'Graph': 'graph',
'Log': 'log5',
'Log_File': {
'file': ['No Errors!'],
'status': '00FF00'
},
'Path': 'path5',
'Run_Date': '2018-08-26',
'Server': 's2',
'Workflow': 'w4',
'index': 1110.0
}
]
var var_env = '';
var var_workflow = '';
var var_run_date = 'Run Date';
$('body').on('shown.bs.modal','#logModal', function(event) {
var getLogFromRow = $(event.relatedTarget).find('td:nth-child(3)').text();
$(this).find('#logDetails').html($('<p>' + getLogFromRow + '</p>'))
});
$.each(row, function(key, value) {
if (key == 'Environment') {
var_env = value;
}
var_workflow = '';
if (key == 'Workflow') {
var_workflow = value;
}
html.push('<p><b>' + key + ':</b> ' + value + '</p>');
});
html.push('<div class="container">');
html.push('<table id="tb" class="test" border=1 style="width:auto" >');
html.push('<tr><th><b>Run Date</b></th><th>Server</th><th style="display:none;">Logs</th><th>Log</th></tr>');
var counter = 0;
for (i in var_full_json) {
if (var_full_json[i].Environment == var_env && var_full_json[i].Workflow == var_workflow) {
html.push('<tr data-id="' + counter + '" data-toggle="modal" data-target="#logModal"><td bgcolor=#"' + var_full_json[i].Log_File.status + '">');
html.push(var_full_json[i].Run_Date);
html.push('</td>');
html.push('<td>');
html.push(var_full_json[i].Server);
html.push('</td>');
html.push('<td style="display:none;">');
html.push(var_full_json[i].Log_File.file);
html.push('</td>');
html.push('<td>');
html.push('<u>Show Log</u>');
html.push('</p></td></tr>');
counter += 1
}
// break after last 7 runs
if (counter == 7) break;
}
html.push('</table>');
//Modal window code
html.push('<div id="logModal" class="modal fade" role="dialog" aria-labelledby="logModal" aria-hidden="true">');
html.push('<div class="modal-dialog">');
html.push('<div class="modal-content">');
html.push('<div class="modal-header">');
html.push('<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>');
html.push('<h3>Error Log :</h3>');
html.push('</div>');
html.push('<div id="logDetails" class="modal-body">'+' '+'</div>');
html.push('<div class="modal-footer">');
html.push('<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>');
html.push('</div>');
html.push('</div>');
html.push('</div>');
html.push('</div>');
html.push('</div>');
return html.join('');
} // detailformatter end
</script>
</head>
<body>
<div class="container" style="padding: 10px; ">
<h1>Runs</h1>
<br/>
<div id="toolbar"></div>
<div class="col-xs-6">
<h2>test 1</h2>
<table class="w3-table w3-striped" id="table1" data-toggle="true" data-toolbar="#toolbar" data-search="true" data-show-columns="true" data-pagination="true" data-height="auto" data-width="auto" data-detail-formatter="prepare_run_date_table" data-show-refresh="true"
data-detail-view="true" data-id-field="Workflow" data-show-toggle="true" data-tooltip="true">
</table>
<div class="footer">
<p> Click on '+' to see last 7 runs </p>
</div>
</div>
<div class="col-xs-6">
<h2>test 2</h2>
<table class="w3-table w3-striped" id="table2" data-toggle="true" data-toolbar="#toolbar" data-search="true" data-show-columns="true" data-pagination="true" data-height="auto" data-detail-formatter="prepare_run_date_table" data-show-refresh="true" data-detail-view="true"
data-id-field="Workflow" data-show-toggle="true" data-tooltip="true">
</table>
<div class="footer">
<p> Click on '+' to see last 7 runs </p>
</div>
</div>
</div>
</body>
</html>