JQuery使用after()方法之后,无法找到添加的节点-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

JQuery使用after()方法之后,无法找到添加的节点

2016-05-25 09:40:04 2211 1

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)
  • 蛮大人123
    2019-07-17 19:13:28
    $('body').delegate('.token-input-delete-token','click', function() {
            $(this).parent().remove();
        });
    0 0
相关问答

1

回答

关于jquery方法的位置的问题

2016-06-03 11:54:09 1604浏览量 回答数 1

1

回答

jquery ajax的问题。?报错

2020-06-22 19:55:43 278浏览量 回答数 1

1

回答

jQuery中ajax请求数据时候json格式报错 ?报错

2020-06-23 00:36:38 370浏览量 回答数 1

1

回答

springmvc+jquery+ajax 报错 Unexpected token <?报错

2020-06-14 17:56:22 413浏览量 回答数 1

1

回答

求助php ajax jquery城市联动获取select的ID遇到的问题?:报错 

2020-06-08 16:38:43 400浏览量 回答数 1

1

回答

【求助】 jQuery的AJAX提交问题:报错

2020-06-07 09:00:58 595浏览量 回答数 1

1

回答

jquery ajax 后台返回值 到前台不会处理了

2016-07-12 15:20:52 1805浏览量 回答数 1

1

回答

S2SH中jquery(ajax)问题

2016-02-20 10:21:32 1822浏览量 回答数 1

1

回答

jQuery ajax jsonp方式取后台的json数组报错,什么原因?

2016-02-19 15:02:20 2231浏览量 回答数 1

1

回答

关于 jquery实现Ajax 但是没有效果

2016-02-17 21:55:35 2420浏览量 回答数 1
+关注
云栖技术
社区爱好者,专为云栖社区服务!
文章
问答
问答排行榜
最热
最新
相关课程
更多
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载