Question

我是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>

Answer 1

使用委托事件处理程序，该消息将首先显示。

$('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>

模态窗口显示事件首次无效

1 个答案: