javascript - 为什么按下按钮时页面会刷新？

Question

这是我页面的相关代码:

HTML:

    <button class="ajout-col"><i class="fas fa-columns"> Ajouter une colonne</i></button>
    <div class="table-responsive">
        <table class="table">
        <thead>
            <tr>
                <th></th>
                <th>
                    <button class="btn"><i class="fas fa-trash remove-col"></i></button>
                    <button class="btn"><i class="fas fa-text-height text-col"></i></button>
                    <button class="btn"><i class="fas fa-sort-numeric-down nbr-col"></i></button>
                    <input type="text" class="form-control">
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
            <td>
                <button class="btn"><i class="fas fa-trash remove-row"></i></button>
            </td>
            <td>
                <input type="text" class="form-control">
            </td>
            </tr>
        </tbody>
        </table>
    </div>
    <button class="ajout-lig"><i class="fas fa-list-ul"> Ajouter une ligne</i></button>

Javascript:

$('body').on('click', '.remove-row', function() {

    $(this).parents('tr').remove();

});

(网格的任何按钮都会刷新我的页面，我只是放置了删除行按钮，因为它是最短的代码，只是为了清晰起见)

(问题位于第二个选项卡上，只需在第一个选项卡上填写信息即可访问第二个选项卡)

每当我按下网格中的按钮时，它就会刷新我的页面

我在谷歌上搜索，看来我必须添加“return false”或“e.preventDefault();”解决这个问题，我尝试过，但它只解决了部分问题

如果我在每个 .on('click') 的末尾添加其中任何一个，它可以解决添加列或行的问题但是删除一行或一列将会工作一两次，然后我的页面将再次刷新...其他按钮(文本和数字按钮)也是如此

预先感谢您的帮助! :)

// Code goes here

$(document).ready(function() {
    // add row
    $('body').on('click', '.ajout-lig', function() {

        var tr = $(this).parents('.table-content').find('.table tbody tr:last');
        if (tr.length > 0) {
            var clone = tr.clone();
            clone.find(':text').val('');
            tr.after(clone);

        } else {
            var cols = $(this).closest('.table-content').find('th').length,
                tr0 = $('<tr/>');
            tr0.html('<td><button class="btn"><i class="fa fa-trash remove-row"></i></button></td><td> <input type="text" class="form-control"> </td>');
            for (var i = 2; i < cols; i++) {
                tr0.append('<td> static element </td>')
            }
            $(this).closest('.table-content').find('.table tbody').append(tr0);
        }
    });

    // delete row
    $('body').on('click', '.remove-row', function() {

        $(this).parents('tr').remove();

    });

    // add column
    $('body').on('click', '.ajout-col', function() {

        $(this).parent().find('.table thead tr').append('<th><button class="btn"><i class="fas fa-trash remove-col"></i></button> <button class="btn"><i class="fas fa-text-height text-col"></i></button> <button class="btn"><i class="fas fa-sort-numeric-down nbr-col"></i></button> <input type="text" class="form-control pull-left" value=""></th>');
        $(this).parent().find('.table tbody tr').append('<td><input type="text" class="form-control"></td>');

    });

    // change column type to text
    $('body').on('click', '.text-col', function(event) {

        let ndx = $(this).parent().index() + 1;
        let inputsCol = $('.table tbody tr td:nth-child(' + ndx + ') input');
        inputsCol.attr("type", "text");

    });

    // change column type to number
    $('body').on('click', '.nbr-col', function(event) {

        var filter = /^[0-9]*$/g;
        var cond = false;
        var min = prompt('Valeur minimum :');
        while (cond == false) {
            if (min.match(filter)) {
                cond = true;
            } else {
                var min = prompt('Valeur minimum incorrect, réessayez :');
            }
        }

        var cond = false;
        var max = prompt('Valeur maximum :');
        while (cond == false) {
            if (max.match(filter)) {
                cond = true;
            } else {
                var max = prompt('Valeur maximum incorrect, réessayez :');
            }
        }


        let ndx = $(this).parent().index() + 1;
        let inputsCol = $('.table tbody tr td:nth-child(' + ndx + ') input');
        inputsCol.attr("type", "number").prop("min", min).prop("max", max);
        //console.log("inputs modified, example:", inputsCol2[0])

    });


    // remove column
    $('body').on('click', '.remove-col', function(event) {
        // Get index of parent TD among its siblings (add one for nth-child)
        var ndx = $(this).parent().index() + 1;
        // Find all TD elements with the same index
        $('th', event.delegateTarget).remove(':nth-child(' + ndx + ')');
        $('td', event.delegateTarget).remove(':nth-child(' + ndx + ')');

    });
});

$(document).ready(function(){

    $('#btn_login_details').click(function(){

        var error_date = '';
        var error_titre = '';
        var error_entreprise = '';
        var error_conseiller = '';
        var filter = /^([0-2][0-9]|(3)[0-1])(\/)(((0)[0-9])|((1)[0-2]))(\/)\d{4}$/;

        if($.trim($('#titre').val()).length == 0)
        {
            error_titre = 'Titre requis !';
            $('#error_titre').text(error_titre);
            $('#titre').addClass('has-error');
        }
        else
        {
            error_titre = '';
            $('#error_titre').text(error_titre);
            $('#titre').removeClass('has-error');
        }

        if($.trim($('#entreprise').val()).length == 0)
        {
            error_entreprise = 'Nom de l\'entreprise requis !';
            $('#error_entreprise').text(error_entreprise);
            $('#entreprise').addClass('has-error');
        }
        else
        {
            error_entreprise = '';
            $('#error_entreprise').text(error_entreprise);
            $('#entreprise').removeClass('has-error');
        }

        if($.trim($('#conseiller').val()).length == 0)
        {
            error_conseiller = 'Nom du conseiller requis !';
            $('#error_conseiller').text(error_conseiller);
            $('#conseiller').addClass('has-error');
        }
        else
        {
            error_conseiller = '';
            $('#error_conseiller').text(error_conseiller);
            $('#conseiller').removeClass('has-error');
        }

        if($.trim($('#date').val()).length == 0)
        {
            error_date = 'Date requise !';
            $('#error_date').text(error_date);
            $('#date').addClass('has-error');
        }
        else
        {
            if (!filter.test($('#date').val()))
            {
                error_date = 'Date invalide';
                $('#error_date').text(error_date);
                $('#date').addClass('has-error');
            }
            else
            {
                error_date = '';
                $('#error_date').text(error_date);
                $('#date').removeClass('has-error');
            }
        }

        if((error_titre != '') || (error_conseiller != '') || (error_entreprise != '') || (error_date != ''))
        {
            return false;
        }
        else
        {
            $('#list_login_details').removeClass('active active_tab1');
            $('#list_login_details').removeAttr('href data-toggle');
            $('#login_details').removeClass('active');
            $('#list_login_details').addClass('inactive_tab1');
            $('#list_personal_details').removeClass('inactive_tab1');
            $('#list_personal_details').addClass('active_tab1 active');
            $('#list_personal_details').attr('href', '#personal_details');
            $('#list_personal_details').attr('data-toggle', 'tab');
            $('#personal_details').addClass('active in');
        }
    });

    $('#previous_btn_personal_details').click(function(){
        $('#list_personal_details').removeClass('active active_tab1');
        $('#list_personal_details').removeAttr('href data-toggle');
        $('#personal_details').removeClass('active in');
        $('#list_personal_details').addClass('inactive_tab1');
        $('#list_login_details').removeClass('inactive_tab1');
        $('#list_login_details').addClass('active_tab1 active');
        $('#list_login_details').attr('href', '#login_details');
        $('#list_login_details').attr('data-toggle', 'tab');
        $('#login_details').addClass('active in');
    });

    $('#btn_gen_grille').click(function() {

            // Générer la grille
            // Ici
    });

    $('#btn_personal_details').click(function(){
        $('#list_personal_details').removeClass('active active_tab1');
        $('#list_personal_details').removeAttr('href data-toggle');
        $('#personal_details').removeClass('active');
        $('#list_personal_details').addClass('inactive_tab1');
        $('#list_contact_details').removeClass('inactive_tab1');
        $('#list_contact_details').addClass('active_tab1 active');
        $('#list_contact_details').attr('href', '#contact_details');
        $('#list_contact_details').attr('data-toggle', 'tab');
        $('#contact_details').addClass('active in');
    });

    $('#previous_btn_contact_details').click(function(){
        $('#list_contact_details').removeClass('active active_tab1');
        $('#list_contact_details').removeAttr('href data-toggle');
        $('#contact_details').removeClass('active in');
        $('#list_contact_details').addClass('inactive_tab1');
        $('#list_personal_details').removeClass('inactive_tab1');
        $('#list_personal_details').addClass('active_tab1 active');
        $('#list_personal_details').attr('href', '#personal_details');
        $('#list_personal_details').attr('data-toggle', 'tab');
        $('#personal_details').addClass('active in');
    });

    $('#btn_contact_details').click(function(){
        var error_address = '';
        var error_mobile_no = '';
        var mobile_validation = /^\d{10}$/;
        if($.trim($('#address').val()).length == 0)
        {
            error_address = 'Address is required';
            $('#error_address').text(error_address);
            $('#address').addClass('has-error');
        }
        else
        {
            error_address = '';
            $('#error_address').text(error_address);
            $('#address').removeClass('has-error');
        }

        if($.trim($('#mobile_no').val()).length == 0)
        {
            error_mobile_no = 'Mobile Number is required';
            $('#error_mobile_no').text(error_mobile_no);
            $('#mobile_no').addClass('has-error');
        }
        else
        {
            if (!mobile_validation.test($('#mobile_no').val()))
            {
                error_mobile_no = 'Invalid Mobile Number';
                $('#error_mobile_no').text(error_mobile_no);
                $('#mobile_no').addClass('has-error');
            }
            else
            {
                error_mobile_no = '';
                $('#error_mobile_no').text(error_mobile_no);
                $('#mobile_no').removeClass('has-error');
            }
        }
        if(error_address != '' || error_mobile_no != '')
        {
            return false;
        }
        else
        {
            $('#btn_contact_details').attr("disabled", "disabled");
            $(document).css('cursor', 'prgress');
            $("#register_form").submit();
        }

    });

});

/* Style the header with a grey background and some padding */
* {box-sizing: border-box;}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}

.header {
    overflow: hidden;
    background-color: #f1f1f1;
    padding: 20px 10px;
}

.header a {
    float: left;
    color: black;
    text-align: center;
    padding: 12px;
    text-decoration: none;
    font-size: 18px;
    line-height: 25px;
    border-radius: 4px;
}

.header a.logo {
    font-size: 25px;
    font-weight: bold;
}

.header a:hover {
    background-color: #ddd;
    color: black;
}

.header a.active {
    background-color: dodgerblue;
    color: white;
}

.header-right {
    float: right;
}

@media screen and (max-width: 500px) {
    .header a {
        float: none;
        display: block;
        text-align: left;
    }

    .header-right {
        float: none;
    }
}

.contenuaccueil {
    text-align: center;
    position : absolute;
    width : 100%;
    color : black;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

.background
{
    margin-top : 10%;
    margin-bottom : 10%;
    position:relative;
    text-align: center;
}

.img
{
    background-repeat: repeat-x;
    width: 100%;
    height: auto;
    text-align: center;
}

footer {
    text-align : center;
    padding-top: 10px;
    padding-bottom: 0px;
    bottom:0;
    width:100%;
    color					: #A5A5A5;
    font-family				: "Lato", sans-serif;
    font-size				: 15px;
    font-weight				: 400;
    text-transform			: uppercase;
    text-decoration			: none;
    letter-spacing			: 3px;
}

.box
{
    width:800px;
    margin:0 auto;
}
.active_tab1
{
    background-color:#fff;
    color:#333;
    font-weight: 600;
}
.inactive_tab1
{
    background-color: #f5f5f5;
    color: #333;
    cursor: not-allowed;
}
.has-error
{
    border-color:#cc0000;
    background-color:#ffff99;
}

/* Styles go here */

.table-content {
    padding: 20px;
}

.form-control {
    width: 90px;
}

/* Style buttons */
.ajout-lig,.ajout-col {
    background-color: DodgerBlue; /* Blue background */
    border: none; /* Remove borders */
    color: white; /* White text */
    padding: 12px 16px; /* Some padding */
    font-size: 16px; /* Set a font size */
    cursor: pointer; /* Mouse pointer on hover */
    border-radius: 5px;
}

/* Darker background on mouse-over */
.ajout-lig:hover,.ajout-col:hover {
    background-color: RoyalBlue;
}

<html>
<head>
    <title>Innovatech</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="css/custom.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://kit.fontawesome.com/38b99a3f0e.js" crossorigin="anonymous"></script>
</head>

<body>
<!-- Titre + Menu -->
<div class="header">
    <a href="index.php" class="logo">Innovatech</a>
    <div class="header-right">
        <a href="index.php">Accueil</a>
        <a class="active" href="ajout.php">Nouveau</a>
        <a href="modif.php">Modifier</a>
        <a href="help.php">Mode d'emploi</a>
    </div>
</div>

<!-- Contenu du site web -->
<div class="contenu">
    <br />
    <div class="container box">
        <br />
        <h2 align="center">Ajout d'un nouvel audit</h2><br />
        <?php echo $message; ?>
        <form method="post" id="register_form">
            <ul class="nav nav-tabs">
                <li class="nav-item">
                    <a class="nav-link active_tab1" style="border:1px solid #ccc" id="list_login_details">Informations à propos de l'entreprise</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link inactive_tab1" id="list_personal_details" style="border:1px solid #ccc">Grille d'audit</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link inactive_tab1" id="list_contact_details" style="border:1px solid #ccc">Génération des graphiques</a>
                </li>
            </ul>
            <div class="tab-content" style="margin-top:16px;">
                <div class="tab-pane active" id="login_details">
                    <div class="panel panel-default">
                        <div class="panel-heading">Informations à propos de l'entreprise</div>
                        <div class="panel-body">
                            <div class="form-group">
                                <label>Titre de l'audit</label>
                                <input type="text" name="titre" id="titre" class="form-control" />
                                <span id="error_titre" class="text-danger"></span>
                            </div>
                            <div class="form-group">
                                <label>Nom de l'entreprise</label>
                                <input type="text" name="entreprise" id="entreprise" class="form-control" />
                                <span id="error_entreprise" class="text-danger"></span>
                            </div>
                            <div class="form-group">
                                <label>Nom du conseiller</label>
                                <input type="text" name="conseiller" id="conseiller" class="form-control" />
                                <span id="error_conseiller" class="text-danger"></span>
                            </div>
                            <div class="form-group">
                                <label>Date de l'interview (jj/mm/aaaa)</label>
                                <input type="text" name="date" id="date" class="form-control" />
                                <span id="error_date" class="text-danger"></span>
                            </div>
                            <br />
                            <div align="center">
                                <button type="button" name="btn_login_details" id="btn_login_details" class="btn btn-info btn-lg">Suivant</button>
                            </div>
                            <br />
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="personal_details">
                    <div class="panel panel-default">
                        <div class="panel-heading">Grille d'audit</div>
                        <div class="panel-body">
                            <div class="table-content">

                                <button class="ajout-col"><i class="fas fa-columns"> Ajouter une colonne</i></button>
                                <div class="table-responsive">
                                    <table class="table">
                                        <thead>
                                        <tr>
                                            <th></th>
                                            <th>
                                                <button class="btn"><i class="fas fa-trash remove-col"></i></button>
                                                <button class="btn"><i class="fas fa-text-height text-col"></i></button>
                                                <button class="btn"><i class="fas fa-sort-numeric-down nbr-col"></i></button>
                                                <input type="text" class="form-control">
                                            </th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr>
                                            <td>
                                                <button class="btn"><i class="fas fa-trash remove-row"></i></button>
                                            </td>
                                            <td>
                                                <input type="text" class="form-control">
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <button class="ajout-lig"><i class="fas fa-list-ul"> Ajouter une ligne</i></button>
                            </div>
                            <br />
                            <div align="center">
                                <button type="button" name="previous_btn_personal_details" id="previous_btn_personal_details" class="btn btn-default btn-lg">Précédent</button>
                                <button type="button" name="btn_personal_details" id="btn_personal_details" class="btn btn-info btn-lg">Suivant</button>
                            </div>
                            <br />
                        </div>
                    </div>
                </div>

                <!--A MODIFIER - PARTIE SUR LES GRAPHIQUES-->
                <div class="tab-pane fade" id="contact_details">
                    <div class="panel panel-default">
                        <div class="panel-heading">Fill Contact Details</div>
                        <div class="panel-body">
                            <div class="form-group">
                                <label>Enter Address</label>
                                <textarea name="address" id="address" class="form-control"></textarea>
                                <span id="error_address" class="text-danger"></span>
                            </div>
                            <div class="form-group">
                                <label>Enter Mobile No.</label>
                                <input type="text" name="mobile_no" id="mobile_no" class="form-control" />
                                <span id="error_mobile_no" class="text-danger"></span>
                            </div>
                            <br />
                            <div align="center">
                                <button type="button" name="previous_btn_contact_details" id="previous_btn_contact_details" class="btn btn-default btn-lg">Précédent</button>
                                <button type="button" name="btn_contact_details" id="btn_contact_details" class="btn btn-success btn-lg">Enregistrer</button>
                            </div>
                            <br />
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Le pied de page -->
<footer>
    <p>
        Innovatech <?php echo date("Y");?> - All rights reserved
    </p>
</footer>

<script src="jss/ajout.js"></script>
<script src="jss/gengrille.js"></script>
</body>
</html>

Answer 1

发生这种情况是因为没有 type 属性的按钮充当 type="submit" 并尝试将表单数据提交到服务器并最终刷新页面。请尝试将类型设置为 type="button" 等按钮，以免页面刷新。

<button class="ajout-col" type="button">
    <i class="fas fa-columns"> Ajouter une colonne</i>
</button>