單擊添加按鈕后元素立即消失

Question

一旦用戶單擊添加按鈕，然后要添加新的<tr>和<td>元素，我想做的事情就非常簡單。問題是新添加的元素會立即消失。 我已經在這里檢查過了，但是無關緊要

我認為代碼段是不言而喻的

 $(document).ready(function() { var i = 1; $('#submit').click(function() { i++ $('#data').append('<tr id="row' + i + '"><td><input type="text" name="name[]" id="name"></td><td><input type="submit" name="remove" id="' + i + '" class="btn btn-danger btn-xs btnRemove" value="x"></td></tr>'); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="addName" method="post" name="addName"> <table id="data"> <tr> <td><input id="name" name="name[]" type="text"> </td> <td><input class="btn btn-success btn-xs btnAdd" id="submit" type="submit" value="+"> </td> </tr> </table> <input class="btn btn-info btn-xs" id="submit" name="submit" type="button" value="Submit"> </form> 

Answer 1

您需要使用.preventDefault(); ：

$('#submit').click(function(e){
    e.preventDefault();
    i++
    $('#data').append('<tr id="row'+i+'"><td><input type="text" name="name[]" id="name"></td><td><input type="submit" name="remove" id="'+i+'"  class="btn btn-danger btn-xs btnRemove" value="x"></td></tr>');

});

否則，您的type=submit按鈕實際上會在單擊時提交表單