为什么ul下的li绑定不了事件

Question

//html代码:

<div class="hot">
        <div class="hot_nav">
            <ul class="hot_list"><!--加了个class属性-->
                <li class="bingxiang"><i></i><span>冰箱冷柜</span</li>
                <li class="xiyiji"><i></i><span>洗衣机</span></li>
                <li class="dianshi"><i></i><span>电视</span></li>
                <li class="kongtiao"><i></i><span>空调</span></li>
                <li class="reshuiqi"><i></i><span>热水器</span></li>
                <li class="chufang"><i></i><span>厨房电器</span></li>
                <li class="shenghuo"><i></i><span>生活家电</span></li>
            </ul>
        </div>

//JS代码:
$('.hot_nav').on('click','.hot_nav>ul>li',function(){

var htype=$(this).attr('class');
console.log(htype);
loadhot(htype);

});
//ul下的li无法绑定,给ul加个class却能找到,已经确定ul为唯一ul
$('.hot_nav').on('click','.hot_list>li',function(){

var htype=$(this).attr('class');
console.log(htype);
loadhot(htype);

});

Answer 1

$('.hot_nav').on('click','>li',function(){
//your code   在后面不要写父元素选择器
})

Answer 2

因为. hot_nav的子节点中并没有. hot_nav

Answer 3

如果是异步加载，最好是委托到body上，

$('body').on('click', '.hot_list li', function() {
//code
})