Question

在doc.ready中，我通过解析html表动态生成选择列表 - ＆gt;的 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>

然后只需将click事件监听器附加到它：

$(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
    });
});

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

1 个答案: