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

Question

在doc.ready我dynamicaly通过解析HTML表格生成一个选择选项列表 - >selected_Test_Platforms 当我点击提交按钮，我要提交所选的选项并运行主（）

主要（ ）函数做了很多计算并最终打印了一些谷歌图表。

每次点击提交按钮，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 
    }); 
});