JQuery使用after()方法之后，无法找到添加的节点
html中原有节点<li class="token-input-token"></li>一个
通过append()方法，添加<li class="token-input-token"></li>苦干个
最后用remove()方法删除这些节点，发现原有节点可以删除，新增加的节点不能删除。
这是为什么？如何解决？
jsfiddle具体代码如下：http://jsfiddle.net/vowmmm/zsj8d3gz/
原始代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN">
<head>
<title>Document</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.post-option {
padding: 10% 25%;
}
ul.token-input-list {
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
background-color: #FFFFFF;
border: 1px solid #D9D9D6;
border-radius: 2px;
margin: 0;
min-height: 32px;
padding: 0 4px;
z-index: 999;
}
ul.token-input-list li {
margin: 4px 0;
}
ul.token-input-list li input {
border: 0 none;
margin-top: 5px;
padding: 0;
width: 100%;
}
li.token-input-token {
background-color: #F3F3F0;
cursor: default;
font-size: 14px;
height: 28px;
line-height: 28px;
padding: 0 6px;
text-align: right;
white-space: nowrap;
}
li.token-input-token p {
display: inline;
float: left;
margin: 0;
}
li.token-input-token span {
color: #BBBBBB;
cursor: pointer;
font-weight: bold;
}
li.token-input-input-token {
padding: 0 4px;
}
ul.token-slidedown {
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
background-color: #FFFFFF;
border: 1px solid #D9D9D6;
border-radius: 2px;
margin: 0;
min-height: 32px;
z-index: 999;
}
ul.token-slidedown li {
cursor: default;
font-size: 14px;
line-height: 32px;
padding: 0 6px;
}
ul.token-slidedown li:hover {
background-color: #467B96;
color: #FFFFFF;
}
</style>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script>
$(function() {
$('.token-slidedown li').on('click', function() {
var $token_value = $(this).find('span').text();
var $li = '<li class="token-input-token"><p>' + $token_value + '</p><span class="token-input-delete-token">×</span></li>';
$('.token-input-token:last').after($li);
});
$('.token-input-delete-token').on('click', function() {
$(this).parent().remove();
});
})
</script>
展开
收起
1
条回答
写回答
写回答
-
我说我不帅他们就打我，还说我虚伪$('body').delegate('.token-input-delete-token','click', function() { $(this).parent().remove(); });2019-07-17 19:13:28赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
