on事件绑定阻止冒泡的问题

Posted 2020-08-25 me春天

当使用on进行事件绑定时当要给document绑定click，而子元素要禁止冒泡，那么子元素里面的子元素的click事件就会无效了，

下面无效版：

$(\'#queue\').on(\'click\', \'.link\', function() {
        var t = $(this)
        ,box = t.next()
        if(t.hasClass(\'active\')) {
            box.hide()
            t.removeClass(\'active\')
        }
        else {
            box.show()
            t.addClass(\'active\')
        }
        event.stopPropagation()
    })

//排队列表收缩
    $(document).on(\'click\',\'body\',function(){
        $(\'.link\').removeClass(\'active\')
        $(\'.queue-box\').hide();
    })
    $(\'#queue\').on(\'click\',\'.queue-box\',function(){//绑 $(\'#queue\')或 $(document)都一样
        event.stopPropagation()

//主要是下面
            $(document).on(\'click\',\'.btn-queue-join\',function(){
                mywebsocket.send(JSON.stringify({
                    "action": "patientJoinQueue",
                    "patientCode": patientCode,
                    "orderCode": $(this).parents(\'.item\').attr(\'data-id\')
                }))
            });

//修改$(document)为$(\'.queue-box\')就可以了
            $(\'.queue-box\').on(\'click\',\'.btn-queue-join\',function(){
                mywebsocket.send(JSON.stringify({
                    "action": "patientJoinQueue",
                    "patientCode": patientCode,
                    "orderCode": $(this).parents(\'.item\').attr(\'data-id\')
                }))
            });

 

参考http://www.cnblogs.com/tengj/p/4794947.html对其进行了理解

暂时没空后面补理解