【jquery】为什么live(）方法不能用了会影响到不相关的代码执行，而自己所在的功能却正常？

Question

请看图下面这段代码，效果如图。
上面的库里、乐邦两个按钮，我给设置了点击后变色的功能，然而不能执行。我把相关代码剥离开，它是可以执行的。editplus说是live()方法的问题。我一看不对啊，live()方法是下面条件筛选效果的代码，这两段代码不相关啊，而且live（）方法有问题，那第二个筛选的效果也不能执行啊，可他的效果却好好的。
经查资料，在新版jquery中live（）不推荐了，于是我把jquery版本调到1.5.1，第一个功能也可以了，把live改成on，也没问题。或者把功能1的代码放到功能2前面也可以。

所以，我想问：为什么live（）方法不能用了会影响到其他不相关的代码，却不会影响到自己？

<style>
.s01 
        {
    width:500px;
    height:27px;
    background-color:white;
    
    } 

.s01-ul li
    {
        
        border:1px solid #B7B7B7;
        list-style-type:none;    
        width:75px;
        height:25px;
        background-color: #FFFFff;
        text-align:center;
        display:inline;
    }     
.s01-ul a
    {
        font-size:15px;
        line-height:25px;
        text-decoration:none;    
        display:inline-block;
        height:25px;
        width:75px;
    }     
.s01-ul li a:hover
    {
        background:#D4CEC5;
    }
    
.s01-ul li a:hover
    {
        background:#D4CEC5;
    }
    
.s01-01
    {    margin:0 auto;
        width:310px;
        }
    

.x{background-color:blue;}
.selected{background-color:green;}
</style>


<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

<script>


//功能2
$(document).ready(function(){
            
    $("#select1 dd").click(function () {
        $(this).addClass("selected").siblings().removeClass("selected");
        if ($(this).hasClass("select-all")) {
            $("#selectA").remove();
        } else {
            var copyThisA = $(this).clone();
            if ($("#selectA").length > 0) {
                $("#selectA a").html($(this).text());
            } else {
                $(".select-result dl").append(copyThisA.attr("id", "selectA"));
            }
        }
    });

    
    
    $("#selectA").live("click", function () {
        $(this).remove();
        $("#select1 .select-all").addClass("selected").siblings().removeClass("selected");
    });
    
    
    $(".select dd").live("click", function () {
        if ($(".select-result dd").length > 1) {
            $(".select-no").hide();
        } else {
            $(".select-no").show();
        }
    });
});

//功能1
$(document).ready(function(){
    $('.s01-01 a').click(function(){
        $(this).addClass('x');
        })
    });

</script>



<!--功能1-->
<div class='s01-01'>
   <ul class='s01-ul'>
    <li><a href='#'>库里</a></li>
    <li><a href='#'>乐邦</a></li>

   </ul>
</div>


<!--功能2-->

<div class="demo">
    
    <ul class="select">
        <li class="select-list">
          <dl id="select1">
                <dt>范围：</dt>
                <dd class="select-all selected"><a href="#">全部</a></dd>
                 
                <dd><a href="#">30-39</a></dd>
                <dd><a href="#">39-49</a></dd>
                <dd><a href="#">49-59</a></dd>
                <dd><a href="#">59以上</a></dd>
                
            </dl>
        </li>
        
        <li class="select-result">
            <dl>
                <dt>已选条件：</dt>

            </dl>
        </li>
    </ul>
    </div>


</div>

Answer 1

当js代码出错以后，会阻塞后续的代码执行。 由于你代码中用的 jquery 中用的版本是1.9.1，该版本没有 live 方法。当运行到 live 调用报错时，后续第二段的 document.ready 压根没有执行，所以页面的点击也是无效的。

Answer 2

版本问题，js是单线程的，发生阻塞以后如果没有异常处理机制就会进行不下去，支持live的jq版本都比较老了，你这个版本也不支持live了，题主换用on吧