关于jQuery动态创建的元素,需要删除

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
    p{
        background: gray;
        color: yellow;
    }
    </style>
   <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
</head>

<body>
<div>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
</div>
<script>
    $("div").on("click","p",function(){
        alert($(this).html());
    })
</script>
</body>

</html>

其中

<script>
    $("div").on("click","p",function(){
        alert($(this).html());
    })
</script>
<script>
    $("p").on("click",function(){
        alert($(this).html());
    })
</script>

一,请问这两种方法有什么区别?

二,第一种方法那样写的好处是什么

三,在网上查了一下,如果是动态创建的元素,比如上面的p,动态创建的。需要用第一种方式来绑定删除。 而且是需要绑定在父元素div上来写删除的语句。不太懂为何要绑定在div上进行删除,为啥不能直接绑定在this点击的元素上删除。虽然我测试那样确实没用,但是不知道其中的道理。

<script>
    $("div").on("click","p",function(){
        alert($(this).parent().remove());
    })
</script>

麻烦大神们帮忙答疑解惑。感谢啦。

阅读 3.9k
2 个回答

1、JS 没法给动态生成的元素绑定事件,因为总要先有元素再绑定
2、JS 事件是冒泡机制,简单来说就是事件会响应在本元素节点和所有的父元素节点

所以第一种用法就是这个原理,动态生成的 p 元素没法绑定事件,但是如果你点击触发了 click 事件,那么会冒泡到 父元素 div,在这个节点处理

你可以搜索一下
1、JS 事件冒泡
2、JS 事件委托

手机打字,第一个的好处就是动态插入后,因为js机制,没办法给动态插入绑定事件,但是在父级(冒泡机制)则可以监听到,等于通过父级去命令父级下的儿子

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题