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

Question

在 doc.ready 中，我通过解析 html table -> selected_Test_Platforms[= 动态生成 select 选项列表30=] 当我点击提交按钮时，我想提交 selected 选项和运行 main()

main() 函数进行了大量计算并最终打印出一些 google 图表。

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

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

document.ready function called again after submit button?

javascript

jquery

document-ready