jquery版本问题？

问题描述

问 题

这个我从jq 1.8.3 升级到1.9.0 将条件选中后再次点击应该删除，但是好像失效了？请问怎么回事呢？

效果预览

        <div style="width:100%; margin:0 auto;">
            <div class="clearfix">
                <p class="shaixuan-tj floatLeft clearfix">
                    <span><a href="/">全部结果</a></span>
                    <i class="icon-angle-right"></i>
                    <i class="icon-angle-right"></i>
                </p>
                <p id="sxbtn" class="shaixuan-btn clearfix"><span><em>收起筛选</em><i class="icon-angle-up"></i></span></p>
            </div>
            <div id="page-search-store" class="mb10 border sxcon">
                <div class="search-by by-category relative">
                    <dl class="relative clearfix">
                        <dt class="floatLeft"><a href="/">品牌：</a></dt>
                        <dd class="floatLeft show-con">
                            <a href="{:U('customer/index','by=test')}" class="">进口牛奶</a>
                            <a href="/" class="">进口母婴用品</a>
                            <a href="/" class="">进口零食</a>
                            <a href="/" class="">进口冲调保健</a>
                            <a href="/" class="nzw12">进口个人护理</a>
                            <a href="/" class="">进口牛奶</a>
                            <a href="/" class="">进口母婴用品</a>
                            <a href="/" class="">进口零食</a>
                            <a href="/" class="">进口冲调保健</a>
                            <a href="/" class="">进口个人护理</a>
                            <a href="/" class="">进口零食</a>
                            <a href="/" class="">进口冲调保健</a>
                            <a href="/" class="">进口个人护理</a>
                        </dd>
                        <dd class="floatLeft show-more"><h3 class="pointer clearfix"><span>更多</span><i class="icon-angle-down"></i></h3></dd>
                    </dl>
                    <dl class="relative clearfix" style="border-bottom:0">
                        <dt class="floatLeft"><a href="/">规格：</a></dt>
                        <dd class="floatLeft show-con">
                            <a href="/" class="">10-15吨</a>
                            <a href="/" class="">20-25吨</a>
                        </dd>
                    </dl>

                </div>
            </div>
        </div>

js:

/**
 * Created by Administrator on 2016-12-29.
 */

$(function(){
    $(".shaixuan-tj span.crumb-select-item").on('hover',function(event){
        if(event.type=='mouseenter'){
            $(this).addClass("crumb-select-itemon");
        }else{
            $(this).removeClass("crumb-select-itemon");
        }
    });
    $(".shaixuan-tj span.crumb-select-item").on('click', function(event){
        event.preventDefault();
        $(this).remove();
        var TTR = $(this).find("em").text();
        $(".show-con a").each(function(){
            var TT = $(this).text();
            THI = $(this);
            THIPP = $(this).parents("dl");
            if(TTR==TT){
                THI.removeClass("nzw12");
                THIPP.css("display","block");
            }
        })
    });
    $(".show-con a").click(function(event){
        event.preventDefault();
        THIP = $(this).parents("dl");
        if($(this).hasClass("nzw12")){
        }else{
            $(this).addClass("nzw12");
            var zhiclass = $(this).parents("dd").siblings("dt").find("a").text();
            zhicon = $(this).text();
            tianjaneir="<span class='crumb-select-item'><a href='/'><b>"+zhiclass+"</b><em>"+zhicon+"</em><i class='icon-remove'></i></a></span>"
           $(".shaixuan-tj").children().last().after(tianjaneir);
           // THIP.css("display","none");
        }
    });
    $(".show-more").click(function(event){
        event.preventDefault();
        var ticon = $(this).find("i");
        tspan = $(this).find("span");
        if($(this).hasClass("zk")){
            $(this).siblings(".show-con").css("height","30px");
            ticon.removeClass("icon-angle-up");
            ticon.addClass("icon-angle-down");
            tspan.html("更多");
            $(this).removeClass("zk")
        }else{
            $(this).siblings(".show-con").css("height","auto");
            ticon.removeClass("icon-angle-down");
            ticon.addClass("icon-angle-up");
            tspan.html("收起");
            $(this).addClass("zk")
        }
    });
    $("#sxbtn").click(function(event){
        event.preventDefault();
        var xicon = $(this).find("span i");
        xspan = $(this).find("span em");
        if($(this).hasClass("zkon")){
            xspan.text("收起筛选");
            xicon.removeClass("icon-angle-down");
            xicon.addClass("icon-angle-up");
            $(".sxcon").slideDown();
            $(this).removeClass("zkon")
        }else{
            xspan.text("查看筛选");
            xicon.removeClass("icon-angle-up");
            xicon.addClass("icon-angle-down");
            $(".sxcon").slideUp();
            $(this).addClass("zkon")
        }
    })


})

解决方案

因为你的事件并没有绑定在$(".shaixuan-tj span.crumb-select-item")上面

你虽然添加了元素$(".shaixuan-tj").children().last().after(tianjaneir)但该元素并没添加上点击事件

这篇关于jquery版本问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！