父子关系的两个div都绑定了click，点击上面的就激活了下面的click，怎么控制？

Question

目的：做一个文章列表，ajax添加了内容的基本机构是这样的<ul>年<li>月<ul><li>日</li></ul></li></ul>，要实现的功能是点击年出现月的列表，点击月出现日的列表，因为内容都是ajax添加，我用live绑定了年和月的click事件。问题如下：点击年出现了月列表，这是正常的，但点击月的时候，同时激发了父级年的click事件，日的列表一闪就没了，又变成了点击年后出现月的样子。这个问题有没有好的解决办法？$(function() {
    var date_type = "";
    get_li();
    function get_li() {
        $.ajax({
            type : "post",
            dataType : "html",
            url : "member/content_li.php",
            data : {
                q_id : $("#qid").html(),
                date_type : date_type
            },
            success : function(res_year) {
                $("#date_li").html(res_year);
                var year = ""
                $(".year").live("click", function() {
                    year = $(this).html().substr(0,4);
                    $.ajax({
                        type : "post",
                        dataType : "html",
                        url : "member/content_li.php",
                        data : {
                            q_id : $("#qid").html(),
                            date_type : "year",
                            year : year
                        },
                        success : function(res_month) {
                            $("li[year=" + year + "]").html(res_month);
                            var month = ""
                            $(".month").live("click", function() {
                                month = $(this).html().substr(0,2);
                                $.ajax({
                                    type : "post",
                                    dataType : "html",
                                    url : "member/content_li.php",
                                    data : {
                                        q_id : $("#qid").html(),
                                        date_type : "month",
                                        year : year,
                                        month : month
                                    },
                                    success : function(res_day) {
                                        $("ul[month=" + month + "]").html(res_day);
                                        $(".day").live("click", function() {
                                            day = $(this).html().substr(0,2);
                                            var date = year + "-" + month + "-" + day;
                                            $.ajax({
                                                type : "post",
                                                dataType : "json",
                                                url : "member/content_li.php",
                                                data : {
                                                    q_id : $("#qid").html(),
                                                    date_type : "day",
                                                    date : date
                                                },
                                                success : back_do11
                                            })
                                        })
                                    }
                                })
                            })
                        }
                    })
                })
            }
        })
    }

Answer 1

怎么处理能否指点一下，我在点击月的时候对年进行unbind("click")，结果还是无法禁止。

Answer 2

我是这么考虑的，date_type = ""返回年，date_type ="year"返回月，date_type ="month"返回日。因为查询日的时候需要知道是哪年哪月的，所以我就嵌套到里面了。当然我也觉得不好，可以改正。但是即使分开写，主要的问题还是没解决啊？

Answer 3

阻止JavaScript事件冒泡传递（cancelBubble)

Answer 4

    $(".year").live("click", function(e) {
        e.stopPropagation();//阻止冒泡
    })
其他类似一样加上;

Answer 5

按楼上所说阻止冒泡确实解决了我的问题。但我还想给年月加上折叠功能，如果下面没有子级元素就添加，有就隐藏子级元素。我第一次点击展开了，再点击也折叠了，但继续点击就无效了，因为阻止了冒泡。虽然这个问题可以不用ul.li的嵌套来解决，但我还是想知道用嵌套怎么做？

Answer 6

需要看到效果图片与HTML才能给出方法。目前不太明白你的需求。

Answer 7

明白了，后面那个问题是代码错了，我以为隐藏就不存在了呢。我把代码改成了这样，实现了ul折叠展开的功能，我是初学者，大家不要见笑。$(function() {
    var date_type = "";
    get_li();
    var year = "";
    var month = "";
    function get_li() {
        $.ajax({
            type : "post",
            dataType : "html",
            url : "member/content_li.php",
            data : {
                q_id : $("#qid").html(),
                date_type : date_type
            },
            success : function(res_year) {
                $("#date_li").html(res_year);
            }
        })
    }
    $(".year").live("click", function(e) {
     var n=$(this).children().length;
      if(n>0){
       if($(this).children().is(":hidden")){
       $(this).children().show();
       }else{
       $(this).children().hide();
       }
      }else{
        year = $(this).html().substr(0,4);
        $.ajax({
            type : "post",
            dataType : "html",
            url : "member/content_li.php",
            data : {
                q_id : $("#qid").html(),
                date_type : "year",
                year : year
            },
            success : function(res_month) {
                $("ul[year=" + year + "]").append(res_month);
            }
        })
      }
      e.stopPropagation();//阻止冒泡
    })
    $(".month").live("click", function(e) {
     var n=$(this).children().length;
        if(n>0){
         if($(this).children().is(":hidden")){
         $(this).children().show();
         }else{
         $(this).children().hide();
         }
        }else{
        month = $(this).html().substr(0,2);
        $.ajax({
            type : "post",
            dataType : "html",
            url : "member/content_li.php",
            data : {
                q_id : $("#qid").html(),
                date_type : "month",
                year : year,
                month : month
            },
            success : function(res_day) {
                $("ul[month=" + month + "]").append(res_day);
            }
        })
        }
               e.stopPropagation();//阻止冒泡
    })
    $(".day").live("click", function(e) {
        day = $(this).html().substr(0,2);
        var date = year + "-" + month + "-" + day;
        $.ajax({
            type : "post",
            dataType : "json",
            url : "member/content_li.php",
            data : {
                q_id : $("#qid").html(),
                date_type : "day",
                date : date
            },
            success : back_do11
        })
                        e.stopPropagation();//阻止冒泡
    })

Answer 8

干吗不用knockout ，可以满足你各种匪夷所思的绑定，至于冒泡，就看你想让谁冒了

Answer 9

应该是live的问题吧，你竟然用了live，你就可以把事件绑定的代码不要写到ajax的success方法里。因为那样的话，每一次请求都会live一下。你把live的那些代码提取出来试下。$.ajax(...);
$(".year").live(...);
$(".month").live(...);
$(".day").live(...);

Answer 10

在点击月的函数里面，加个return false; 就是阻止事件冒泡和删除默认行为。如果只要阻止事件冒泡，可以跟7楼一样。写个阻止事件冒泡的句子就可以了。