ajax加载出来的html,无法用选择器绑定事件

ajax加载出来的html,无法用选择器绑定事件,如

$("p").hover(function(){
    $("p").css("background-color","yellow");
},function(){
    $("p").css("background-color","pink");
});

不生效,原因在于:

异步加载,也就是说当你的整个页面加载完成后$('element').hover(function(){.....});这句根本找不到你异步加载的element,所以它就不会执行了,即使你之后再把element这个加载进来,在浏览器也不会找到这个element的,因为浏览器在第一次加载的时候没有找到它,并且浏览器在你加载进这个element来之后也不会重新渲染一次,所以找不到

$("p").hover(function(){
    $("p").css("background-color","yellow");
},function(){
    $("p").css("background-color","pink");
});

 解决办法,换成以下写法

    $(document).on("mouseover", "element", function(){
        debugger
        $(this).find('.more').css("display","block");
    })
    $(document).on("mouseout", "element", function(){
        debugger
        $(this).find('.more').css("display","none");
    });

猜你喜欢

转载自blog.csdn.net/weixin_40918145/article/details/84849379
今日推荐