提交按钮后再次调用 document.ready 函数？

Question

在 doc.ready 中，我通过解析 html 表动态生成选择选项列表 -> selected_Test_Platforms 当我单击提交按钮时，我想提交所选选项并运行 main()

main() 函数做了很多计算，最后打印了一些谷歌图表。

每次我单击“提交”按钮时，main() 函数都会正确执行，但不久之后 document.ready 函数也会被调用，并且所有内容都会被覆盖！

为什么我只想调用 main 却再次调用 document.ready 函数？

$(document).ready(function() {
//...
// ---------------------------------------------------------------------//
// find Affected TestPlatforms and add them to the selector
// ---------------------------------------------------------------------//
    $('tbody tr').each(function() {
        var TestPlatform = $(this).find('td.Affected').text(); //Affected Test Platforms
        aquireTestPlatforms(TestPlatform);
    });
    addTestPlatformsToSelector();
});

function main(){

//...multiple lines of calculation...

// example of one Chart
    google.charts.setOnLoadCallback(drawSOWCoverageChart);
    function drawSOWCoverageChart(){
    
        var data = google.visualization.arrayToDataTable([
            ['Type', 'Count'],
            ['Positive Tested and Tested with Restrictions', posSOWTestCoverage],
            ['other states', SOWReqCount-posSOWTestCoverage]
        ]);

        var options = {
            title: 'Test Coverage',
            width: 600,
            height: 400,
            legend: { position: 'right',alignment: 'center', maxLines: 3 },
            chartArea: {left:80, bottom:20},
            colors: ['#109618', '#DC3912']
        };

        var chart = new google.visualization.PieChart(document.getElementById('SOWCoverageChart'));
        chart.draw(data, options);
    }
//...
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
  <nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">Report manipulation options:</a>
      </div>

      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <select id="selected_Test_Platforms" class="selectpicker" multiple data-live-search="true" data-live-search-placeholder="Search" data-actions-box="true">
          </select>
        </div>
        <div class="form-group">
          <select id="selected_SIL_relevant" class="selectpicker" multiple data-live-search="true" data-live-search-placeholder="Search" data-actions-box="true">
              <option value='all' selected>-All-</option>
              <option value 'Safety Relevant'>Safety Relevant</option>
              <option value 'QM'>QM</option>
          </select>
        </div>
        <button onclick="main()" class="btn btn-default">Submit</button>
      </form>
    </div>
  </nav>
</div>

Answer 1

这是因为该<button>元素的默认操作是提交表单。基本上，您正在执行main() 并重新加载页面：这会导致$(document).ready(...)事件再次触发。您可以简单地调用event.preventDefault按钮函数，或者使用它<button type="button">来覆盖表单提交行为。

最简单的解决方案：

<button onclick="main()" class="btn btn-default" type="button">Submit</button>

否则，您将必须捕获事件并防止默认行为，即：

function main(e) {
    e.preventDefault()

    // Rest of the code here
}

关于第二种解决方案：将事件处理程序附加到元素总是比使用内联 JS 更好。我们可以为您的按钮提供一个 ID：

<button id="submitButton" class="btn btn-default">Submit</button>

然后简单地将点击事件侦听器附加到它：

$(document).ready(function() {
    $('tbody tr').each(function() {
        var TestPlatform = $(this).find('td.Affected').text(); //Affected Test Platforms
        aquireTestPlatforms(TestPlatform);
    });
    addTestPlatformsToSelector();

    $('#submitButton').on('click', function(e) {
        e.preventDefault();

        // All of main() code can go in here
    });
});