Jquery 2 click Function not working as expected
Question
I am trying to hide and show my footer navbar but i wanted to change the chevron icon , when the navbar is hidden chevron up to be displayed and when navbar shown chevron down show therefore i tried removing a class .bottom-action and add one class .bottom-action2 and when the 2nd one is clicked inverse all settings but it is not working as expected.
$(document).ready(function(){ $(".bottom-action").click(function(){ $(".bottom-navbar").slideToggle("slow"); $(".down").css("display","none"); $(".up").css("display","block"); $(".bottom-action").removeClass('bottom-action').addClass("bottom-action2"); }); $(".bottom-action2").click(function(){ $(".bottom-navbar").slideToggle("slow"); $(".up").css("display","none"); $(".down").css("display","block"); $(".bottom-action2").removeClass('bottom-action2').addClass("bottom-action"); }); });
.bottom-navbar{ position: fixed; width: 100%; bottom: 0px; left: 0px; background: #E4E4E4; padding-top: 3px; border-top: 1px solid #C9C9C9; z-index: 7000; } .bottom-navbar .item{ margin-left: 22px; margin-right: 22px; display: inline-block; border-bottom: 2px solid transparent; cursor: pointer; } .bottom-action{position: fixed; bottom: 0px; right: 10%; background-color: #EEE; color: #000; z-index: 7002; background: transparent; } .bottom-action2{position: fixed; bottom: 0px; right: 10%; background-color: #EEE; color: #000; z-index: 7002; background: transparent; } .bottom-action .down{} .bottom-action .up{display: none;}
<head> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> </head> <div class="bottom-navbar"> <div class='container'><div class='item'>Compare</div></div> </div> <div class='bottom-action'><span class='glyphicon glyphicon-chevron-down down'></span> <span class='glyphicon glyphicon-chevron-up up'></span></div>
2 answers
solution1
3 ACCPTED 2015-05-09 17:03:33
Try :
$(document).on('click', '#myButton', function(e){
//jour code
});
Instead of :
$('myButton').click(...)
solution2
2 2015-05-09 17:04:28
The problem is that at the time of binding the event there is no bottom-action2 element in your DOM. Funnily enough, this would work:
$(".bottom-action").click(function(){
if($(this).hasClass("bottom-action")){
// do one thing
}
else if if($(this).hasClass("bottom-action2")){
// do the other thing
}
}
But as @Béranger pointed out, using a handler on a higher level would be the cleaner solution. In your case something like
$(document).on('click', '.bottom-action', function(e){
// do one thing
});
$(document).on('click', '.bottom-action2', function(e){
// do the other thing
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.