实际业务需求:
最近做项目的时候,有一个Ajax请求获得的循环html数据,且这个数据里面还有带有tip效果的html,在tip里面还嵌套了一个点击加入收藏的Ajax操作。
大概标签如下,其中Alldata下的Ajax循环体是通过Ajax操作得到的,用一般的jquery对其操作是完全没有反应的,即使用on、live都是无效的。

<div class="Alldata">
<!-- Ajax循环体 S -->
<a href="javascript:void(0);" class="showlista" data-why="showid7">
    <h3>名字</h3>
    <div class="tip_show" id="showid7">
        <a href="javascript:void(0);" class="shoucang" data-comid="7">点击收藏</a>
        <a href="#1" class="links">链接1</a>
        <a href="#2" class="links">链接2</a>
    </div>
</a>
<!-- Ajax循环体 E -->
</div>

出现的问题
当页面本身就有这些html,调试的时候还是没问题的,但是通过Ajax获得的这些hmtl数据,压根没有任何JS效果,更别说里面tip隐藏显示效果了。
由于常规的写法都无法对其Ajax得到的数据进行操作,所以就不写常规代码了,只展示我这个Ajax之后,针对得到的数据操作的需求,实际解决问题的代码,用到了delegate方法!是的delegate方法!没错是delegate方法!虽然啰嗦,但是要抢到他的牛X!

<script>
//显示tip
$(".Alldata").delegate(".showlista","mouseenter",function(){
    var whyShowId = $(this).attr("data-id");
    //在操作之前先隐藏全部tips
    $(".tip_show").hide();
    //显示当前先tips
    $("#"+whyShowId).show();
});
//Ajax操作收藏
$(".Alldata").delegate(".shoucang","click",function(){
    var uId = $(this).attr("data-uid");
    $.ajax({
       type: "POST",
       datatype : "json",
       url : "/ajax/gogogo",
       data:{id:comid},
       success:function(result){
           if(result=="f"){
               alert("收藏失败!");
           }else{
               alert("收藏成功!");
           }

       },
       error:function(){
           alert("信息加载失败!");
       }
    });
});

</script>

这里另外说明一下,我用到的是mouseenter,而不是mouseover;delegate方法前面的dom对象(.Alldata)定位下,delegate方法的第一个参数是表示在该标签里面的所有的这个dom对象(即本演示的.showlista或.shoucang)。
我是通过查资料看到这句话:也就是说hover!= mouseover+mouseout。但hover=mouseenter + mouseleave。来总结出来的。

参考资料:
http://bbs.csdn.net/topics/391855727?page=1#post-401899333
http://www.cnblogs.com/aimyfly/archive/2012/05/04/2483123.html

最后由 Leo 编辑于2016年12月20日 20:15