这个我从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)
但该元素并没添加上点击事件