为什么不同的浏览器使用jquery代码为我的烧瓶显示不同的输出？

Question

我对Web开发的经验非常少。我试图在已编写的代码中进行更改，该代码使用python flask，jquery和HTML。代码最初有一个带有提交按钮的输入字段，如果用户输入值，则结果显示在屏幕上。我做了一些更改，添加了一个输入表单和一个提交按钮，以输入用户的电子邮件地址，以便输出可以作为电子邮件附件发送。所有这些模块都可以单独运行。但如果我在不同的浏览器上运行它（我尝试过IE，Chrome和firefox），它们会提供不同类型的意外输出。是代码还是浏览器？

代码看起来像这样：

{% extends "bootstrap/base.html" %}
{% import "bootstrap/wtf.html" as wtf %}
{% import "bootstrap/fixes.html" as fixes %}
{% import "bootstrap/utils.html" as util %}

{% block styles %}
{{super()}}
<style>
.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 20px;
}
.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#error {
    font-size: 14pt;
    background-color: #FFA5A5;
    display: none;
    padding: 10px 20px;
    border-radius: 2px;
}

td { white-space: nowrap; }
</style>
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
{% endblock %}

{% block content %}
  <div class="container" style="width:92%">

    <div class="row">&nbsp;</div>
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-4">
                <a href="/">
                    <img class="img-responsive" src="https://raw.githubusercontent.com/job/irrexplorer/master/docs/irrexplorer-logo.png" />
                </a>
            </div>
            <div class="col-md-1">
            </div>
            <div class="col-md-7">
                <form id="form" class="form-inline">
                    <div class="row">&nbsp;</div>
                    <input type="text" name="data" class="form-control" />
                    <button id="btnsearch" type="submit" class="btn btn-primary" name="search" value="Search" onclick="func1()">Search</button>
                </form>
        <form id="form2" class="form-inline">
                    <div class="row">&nbsp;</div>
                    <input type="text" name="data2" id="emailinput" class="form-control" />
                    <button id="btnsearch2" type="submit" class="btn btn-primary" name="search2" value="Search2" onclick="func2()">Search</button>
                </form>
                {% for message in get_flashed_messages() %}
                    <div class="flash">{{ message }}</div>
                {% endfor %}
            </div>
        </div>

        <div class="row">&nbsp;</div>
        <h2>{{ title }}</h2>

        <div class="row">&nbsp;</div>

        <div class="row" id="loading" style="display:none">
            <div class="col-md-2 col-md-offset-5"><img src="/static/img/loading.gif"/></div>
        </div>
        <div id="error"></div>

        {% for table in tables %}
        <h4>{{ table.title }}</h4>
        <div>
            <table id="{{ table.id }}" class="display" cellspacing="0" width="100%"></table>
            {% if table.note %}
            <div>{{ table.note }}</div>
            {% endif %}
            <div class="row">&nbsp;</div>
        </div>
        {% endfor %}

    </div>


  </div>

{% endblock %}

{% block scripts %}
{{super()}}
<script type="text/javascript" src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/static/js/table.js"></script>
<script type="text/javascript">
// source: https://github.com/h5bp/html5-boilerplate/blob/master/src/js/plugins.js
// Avoid `console` errors in browsers that lack a console.

function func1(){
(function() {
    var method;
    var noop = function () {};
    var methods = [
        'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error',
        'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log',
        'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd',
        'timeline', 'timelineEnd', 'timeStamp', 'trace', 'warn'
    ];
    var length = methods.length;
    var console = (window.console = window.console || {});

    while (length--) {
        method = methods[length];

        // Only stub undefined methods.
        if (!console[method]) {
            console[method] = noop;
        }
    }
}());

$(document).ready(function () {

    {% for table in tables %}
    setup_table("{{ table.id }}", "{{ table.url }}", {{ table.start_fields|safe }} );
    {% endfor %}

});

function setup_table(table_id, data_url, start_fields) {

    state_loading();
    $.ajax({
        url: data_url,
        success: function (data) {
            state_loaded();
            result = JSON.parse(data);
            populatetable('#' + table_id, result, start_fields);
        },
        error: function(error) {
            state_loaded();
            error_message = $(error.responseText).filter("p").text();
            console.log(error_message);
            $("#error").text(error_message);
            $("#error").show()
        },
        cache: false
    });
}
}


function func2(){
    var e = document.getElementById("emailinput").value;
    $.ajax({
            data : {
                    email : $('#emailinput').val()
                   },
                    type : 'POST',
                    url : '/emailid'
                  })
            alert("email sent");

}

</script>
{% endblock %}

{% block head %}
{{super()}}
{{fixes.ie8()}}

{% endblock %}