javascript - 当我单击添加新列按钮时，表单会自动提交

Question

我正在使用连接到数据库的 HTML 和 jQuery 制作用于保存费用记录的表单。

问题是当我单击“添加”按钮时，它应该添加新列，但它会自动提交表单。

---

HTML

<form name="myForm" action="mysql_connection.php" method="post">
    <table>
        <tr>
            <td>Expense     &#160&#160&#160&#160&#160&#160
                            &#160&#160&#160&#160&#160&#160
                            &#160&#160&#160&#160&#160&#160
                            &#160&#160&#160&#160&#160&#160 
                Amount
                <br/>
                <input type="text" name="expense" id="expense" />
                <input type="text" name="amount" id="amount" />
                <br/>

            </td>
            </td>
            <td>
                <button class="add">Add</button>
            </td>
        </tr>
    </table>
    <input type="submit" value="Submit" />
</form>

---

jQuery

        $(document).ready(

        function() {
            $('button.add').live('click',

            function() {
                $(this)
                    .closest('tr')
                    .clone()
                    .appendTo('table');
                $(this)
                    .text('Remove')
                    .removeClass('add')
                    .addClass('remove');
            });
            $('button.remove').live('click',

            function() {
                $(this)
                    .closest('tr')
                    .remove();
            });
            $('input:text').each(

            function() {
                var thisName = $(this).attr('name'),
                    thisRrow = $(this)
                        .closest('tr')
                        .index();
                $(this).attr('name', 'row' + thisRow + thisName);
                $(this).attr('id', 'row' + thisRow + thisName);
            });
        });

这是表格
代码

Answer 1

如果您将<button>元素更改为<button type="button">元素，那么您的解决方案将正常工作。

JSFiddle

元素的默认类型<button>Submit是，所以这就是它导致表单提交的原因。

Answer 2

            $('button.add').live('click',

            function() {
                $(this)
                    .closest('tr')
                    .clone()
                    .appendTo('table');
                $(this)
                    .text('Remove')
                    .removeClass('add')
                    .addClass('remove');
                return false;
            });

在点击功能结束时添加“return false”

Answer 3

检查链接http://jsfiddle.net/J89TF/1/

利用 e.preventDefault();

我认为您应该实施@Nunners 解决方案。B'coz 其干净的代码。