jq动态添加的元素无法触发事件的解决方法

jq动态添加的元素无法触发事件的解决方法

整件事的过程是这样的，今天做任务的时候，有个需求是点击button添加一个div块，这个div块呢有一个close按钮，点击close后会移除整个div块。

我寻思着，这挺简单的嘛，分分钟解决的问题啦。然后十分自信地写下了代码，例子如下

html

<div class="add">
    <p>div块</p>
    <p class="close">关闭</p>
</div>
<button class="addDiv">新增div</button>

css

.add{
        width: 100px;
        height: 100px;
        line-height: 100px;
        background-color: blue;
        color: #ffffff;
        text-align: center;
        position: relative;
    }
    .close{
        position: absolute;
        top: -10px;
        right: -10px;
        width: 50px;
        height: 20px;
        background-color: red;
        line-height: 20px;
    }
     .addDiv{
        margin-top: 20px;
    }

jq代码

 $(".close").on("click",function () {
        $(this).parent().hide();
    })
    $(".addDiv").on("click",function () {
        $(this).before(
            '<div class="add">'+
            '<p>div块</p>'+
            '<p class="close">关闭</p>'+
            '</div>'
        )
    })

嗯，简直不要太完美（日常自恋一下）。结果运行一下发现，？？？原先自己写的div块可以移除掉，新增的div块雷打不动杵在那儿了。这是咋回事？简直让人无发可脱啊？

本着学无止境的精神，在下百度了一通看到了大神的代码。跟着大神的步伐成功解决了问题，撒花~

在此贴上解决方法，方便以后温故。

把事件绑定在父元素中即可解决，没有父元素那就绑body，盘它！
html和css不变，jq代码改为如下，记得要引jQuery哦

$("body").on("click",".close",function () {
        $(this).parent().hide();
    })
    $(".addDiv").on("click",function () {
        $(this).before(
            '<div class="add">'+
            '<p>div块</p>'+
            '<p class="close">关闭</p>'+
            '</div>'
        )
    })