提交按鈕後再次調用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 
    }); 
});