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

x_hola
  • 666

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

所以,我想问:为什么live()方法不能用了会影响到其他不相关的代码,却不会影响到自己?

clipboard.png


<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>


回复
阅读 2.6k
2 个回答

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏