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

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') 的末尾添加任何一个，它就解决了添加列或行的问题，但删除行或列将工作 1 或 2 次，然后我的页面将再次刷新......其他按钮（文本和数字按钮）相同

在此先感谢您的帮助！ :)

 // 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"的type="button" ，以免页面刷新。

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

Answer 2

将<button class="ajout-lig"><i class="fas fa-list-ul"> Ajouter une ligne</i></button>替换为

<button class="ajout-lig" type="button"><i class="fas fa-list-ul"> Ajouter une ligne</i></button>

我认为这个问题是由于，这些按钮实际上是在提交表单。 如果我们不指定按钮类型，它将作为提交类型按钮