为什么不管点击哪里 执行的都是绑定在最外面div上的事件 也阻止了事件冒泡 布局也没问题

Question

<div class="checkmsg">

        <select>

            <option>无</option>

            <option>上传图片不符合正常规范</option>

            <option>图片不清晰</option>

            <option>违规商品</option>

            <option>敏感词</option>

        </select>

        <div class="send_textarea">

            <textarea id="msg"></textarea>

        </div>

        <button style="margin-left:975px">确认</button>

        <button id="cancle">取消</button>

    </div>

js部分

$('.checkmsg select').change(function() {

        var str = $('.checkmsg select').find("option:selected").text();

        var _html = "<p>"+str+"<span id ='del'>x</span></p><br>";

        $(_html).insertBefore('#msg');

    });

$('#del').click(function(event){

        event.stopPropagation();

        alert('ok');

        console.log(e.target)

    });

    $('.send_textarea').click(function(e){

        alert('div了');

        console.log(e.target)

    });

    $('#msg').click(function(){

        alert('text了')

    });

为什么每次不管点击什么地方都alert 点击div了