我尝试制作简单的待办事项列表。这是我的 html 代码:
<form>
Task: <input type="text" name="task" id="input">
<button>Submit</button>
</form>
<br>
<h2>What you need to do</h2>
<ul id="list">
</ul>
然后我尝试使用 jquery 从输入字段中读取并附加到现有的 ul 元素。但是当我在 Chrome 中尝试它时,我新添加的元素显示了半秒并删除。
这是我的js代码:
$(document).ready(function() {
$('button').click(function() {
var new_task = $('#input').val();
$('#list').append('<li>'+new_task+'</li>');
});
});
表单内的按钮具有默认的提交类型,并且将提交表单,您需要防止这种情况或在按钮上设置不同的类型:
$(document).ready(function() {
$('button').on('click', function(e) {
e.preventDefault();
var new_task = $('#input').val();
$('#list').append('<li>'+new_task+'</li>');
});
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)