jQuery动态添加表单行后立即消失的解决方法求助

嘿，我一眼就瞅出问题所在啦——你的「添加行」按钮放在<form>标签里，而且没指定按钮类型，浏览器会默认把它当成提交按钮。点击的时候会触发表单提交，页面直接刷新，刚添加的行当然瞬间就没了！

有两种简单的解决办法，选一个就行：

方法1：给按钮指定type="button"属性 #

直接修改HTML里的按钮，加上type="button"，明确告诉浏览器这是个普通按钮，不会触发表单提交：

<button id="addrows" type="button">添加行</button>

方法2：在点击事件里阻止默认行为 #

如果不想改动HTML，就在jQuery的点击事件里加上event.preventDefault()，拦截表单提交的默认动作：

$("#addrows").click(function(event) {
    // 阻止表单提交的默认行为
    event.preventDefault();
    var html = '';
    html += '<tr>';
    html += '<td></td>';
    html += '<td></td>';
    html += '<td> <input type="text" name="task[]" placeholder="任务" /></td>';
    html += '<td> <input type="number" name="time[]" value="0" style="width:40px;" /></td>';
    html += '<td> <button class="remove">删除</button></td></tr>';
    $("#table-items").append(html);
});

另外给你补个实用小细节：动态添加的删除按钮，直接绑定点击事件是无效的，得用事件委托才能让它正常工作，我顺便把这部分代码也补上：

// 用事件委托处理动态生成的删除按钮
$("#table-items").on('click', '.remove', function() {
    $(this).closest('tr').remove();
});

还有个小提醒：别给动态生成的input加重复的id（比如你原来的id="task"和id="time"），ID在页面里必须唯一，只用name属性就够了——你用的数组形式task[]，提交时完全能正常获取所有输入值。

修改完之后，点击「添加行」按钮，新增的行就会稳稳留在页面上啦！

内容的提问来源于stack exchange，提问作者Shahbaz Khan