提交按钮后再次调用document.ready函数? [英] document.ready function called again after submit button?

问题描述

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

In doc.ready I am dynamicaly generating a select option list via parsing an html table -> selected_Test_Platforms When I click the submit button I want to submit the selected options and run main()

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

The main() function does a lot of calculation and finaly prints some google charts.

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

Every time I click the Submit button, the main() function is exectuted correctly, but shortly after that the document.ready function is also called and everything is overwritten!

为什么即使我只想调用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>

推荐答案

这是因为<button>元素的默认操作是提交表单.基本上，您正在执行main() 并重新加载页面:这将导致$(document).ready(...)事件再次触发.您只需在按钮功能中调用event.preventDefault，或使用<button type="button">覆盖表单提交行为即可.

That is because the default action of the <button> element is to submit the form. Basically you are executing main() and reloading the page: this causes the $(document).ready(...) event to fire again. You can simply call event.preventDefault in the button function, or use <button type="button"> to override form submission behavior.

最简单的解决方案:

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

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

Otherwise, you will have to capture the event and prevent default behavior, i.e.:

function main(e) {
    e.preventDefault()

    // Rest of the code here
}

关于第二个解决方案:始终最好将事件处理程序附加到元素上，而不是使用内联JS.我们可以为您的按钮提供一个ID:

With regards to the second solution: it is always better to attach event handlers to elements instead of using inline JS. We can give your button an ID:

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

然后将click事件侦听器附加到它:

And then simply attach the click event listener to it:

$(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函数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！