[英]add li elements to ul list with .after() method issue
我正在尝试将li
元素添加到ul
列表中。 但是在打开页面源代码之后,我看不到我的DOM已更新。 这是下面的代码。 我也不能删除元素...。当我单击删除按钮时,什么也没有发生。
var msg = $('#danger').hide();
var inputText = $('#todo');
//var list = $('#list');
var globalObj;
//general function that will call other functions
function addListElement(event)
{
event.preventDefault();
var input = inputText.val();
if( input == '')
{
msg.show();
}
else
{
msg.hide();
addCookie(input);
readCookie();
}
}
//function for adding value to cookie
function addCookie(inputValue)
{
globalObj = {text: ''+ inputValue+''};
$.cookie('vesko', '' + globalObj.text + '');
}
// function for reading cookie
function readCookie()
{
var listCookie = $.cookie('vesko');
$('#list').after('<li><input type="checkbox">' + listCookie + '<button class="delete">Delete</button></li>');
}
$(function (){
$('#add').on('click', addListElement);
$('.delete').on('click', function(){
$('.delete').parent().remove();
});
});
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
<h1> <strong> Todo app</strong></h1>
<div class="alert alert-danger" id="danger" role="alert"><strong>Please type something in the field!</strong></div>
<form action="" method="" class="form-inline">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class="glyphicon glyphicon-floppy-save"></span></div>
<input type="text" class="form-control" name="todo" id="todo" placeholder="Type Something">
</div>
</div>
<button type="submit" id="add" class="btn btn-primary">Add ToDo Task</button>
</form>
</div>
</div>
<br><br><br>
<!-- row for ul list elements -->
<div class="row">
<div class="col-md-5">
<ul id="list">
</ul>
</div>
</div>
</div>
您可以将此$('#list').after
更改$('#list').append
吗? 您需要共享更多的html以获得更好的帮助。
after
会将所有内容放在列表中,而不放在列表中。 您应该使用append
将新项添加到名为#list
的列表的#list
。
您还需要重新考虑此部分:
$(function (){
$('#add').click(function(event){
addListElement(event);
});
$(document).on('click', '.delete', function(){
$(this).parent().remove();
});
});
如果#list是ul,则您要使用“追加”而不是“之后”。 如后所述,在ul之后添加一个孤立的li,而append将其放在 ul 内部 。
假设您也可能有多个删除按钮,则还应该考虑更改:
$('.delete').parent().remove();
至
$(this).parent().remove();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.