Jquery double-click Event Not Functioning Properly

I've been attempting to toggle the visibility of my footer navbar while also changing the chevron icon. When the navbar is hidden, I want the chevron pointing up to be displayed, and when the navbar is shown, I want the chevron pointing down to be displayed. I tried removing the class .bottom-action and adding the class .bottom-action2 when the first one is clicked, and then reversing the settings when the second one is clicked. However, it doesn't seem to be 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>

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

Give this a shot :

$(document).on('click', '#myButton', function(e){
    //your code here
});

As an alternative to :

$('myButton').click(...)

Answer №2

It seems that the issue arises because the event is being bound before the bottom-action2 element is present in the DOM. Interestingly, the following code snippet could work:

$(".bottom-action").click(function(){
  if($(this).hasClass("bottom-action")){
      // do one thing
  }
  else if if($(this).hasClass("bottom-action2")){
     // do the other thing
  }
}

However, as @Béranger suggested, a cleaner solution would be to use a delegated event handler on a higher level element. In this case, you could use something like:

$(document).on('click', '.bottom-action', function(e){
   // do one thing
});

$(document).on('click', '.bottom-action2', function(e){
   // do the other thing
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Troubleshooting disappearing values in POST request using ajax and jQuery serialize() method

When I make a post request, I am only able to retrieve two out of four values. I am expecting to get the id, step, name, and email from the form but the only ones I receive are from the hidden inputs. It seems like the jQuery serialize() function might be ...

javascriptphpjqueryajaxpost

"Occasionally, the PHP function for randomly selecting an image may result in

My function is supposed to open a specific directory, create an array of the image files within that directory, and then select a random image from the array to display on a webpage. However, there are instances where it fails to retrieve the image name. ...

phphtmlwordpressimage

What is the best way to ensure that a <div> extends all the way to the bottom?

My goal is to have this element reach the bottom of the screen, but I also have a header which complicates things. Setting height: 100%; or 100vh results in the page being too big and scrollable. I don't want to manually calculate it because of respon ...

htmlcss

Switch between CSS and jQuery styling

Here is a code snippet I'm using to toggle the visibility of content: $(function(){ $('#slider').css('display',''); $('#hideslider').click(function(){ $('#slider').slideToggle('slow&apos ...

jquerycssbackgroundslidetoggle

Encountering an 'unresolved variable' error related to a variable utilized in the preceding line (PHPStorm 2018.2.5)

I'm facing a challenge in my IDE while working on a simple code. I'm currently using Angular 1.4 and ES 5.1. function myFunction() { var vm = this; vm.listResults = null; SomeService.someFunction() .then(function (result) { ...

javascriptangularjsintellij-ideaideecmascript-5

Mysterious anomaly observed: Peculiar trajectory detected in canvas image during left

I have a fascinating HTML5 Canvas that showcases the movement of two identical objects to both the right and the left. Although the right side operates flawlessly, I've noticed that the left object leaves behind an intriguing trail with a hint of gree ...

javascriptjqueryhtmlcsshtml5-canvas

Making Adjustments to the Padding of Main Content Column in Typo3 Using Bootstrap Package

As the administrator of our local sports club's homepage, I oversee svwalddorf.de, powered by typo3 10.4.22 with bootstrap package 11.0.3. The current bootstrap template creates excessive empty space around the centered content area as shown here. Th ...

cssbootstrap-4typo3padding

Sorry, we couldn't find the page you were looking for. The request method used was GET and the request URL was http://127.0.0.1:

I've previously reported this error without success, so I'm providing more details now. I am new to coding and recently started a Django & Python project, but encountered some issues. Despite three weeks of troubleshooting, the problems persist. ...

pythonhtmldjangodjango-models

emphasizing the specific text being searched for within the page

Looking for a solution to search values and highlight matching text words on a page? Let me help you with that. $(function() { var tabLinks = $('.nav > li'), tabsContent = $('.tab-content > div'), ...

javascriptjqueryhtmlhighlight

What could be causing my HTML footer to not grow from its borders?

Hello there, I need assistance with an HTML document I am working on. Can you explain why my footer is not expanding to the edges even though I have set the width to 100%? Please help. Please note that the code provided is incomplete, and for the full cont ...

htmlcss

Combining two table headers into one table and organizing it for a clean appearance

Is it possible to use two different <thead>'s in the same table but have them stacked neatly? Currently, the first heading has 1 fewer column than the second one, resulting in a slightly awkward appearance. If there is a way to extend that first ...

htmldjangobootstrap-5

Exploring Browser History using Cascading Style Sheets

Currently, I am in need of researching a topic for my University project. Unfortunately, the internet has not provided me with any information on this specific subject. The task at hand is as follows: "How and under what circumstances can one uncover ...

css

Conceal the rating of WordPress products when they have no ratings

I am looking to remove the star ratings under the title for products with empty reviews. I specifically want to hide the stars without allowing users to leave a new review. I found a similar solution for hiding a different element and attempted to customiz ...

javascriptphpcsswordpress

Can you explain the purpose of the "letter:" included in the code and how it is utilized?

g: function testFunction() { return true; } h: function anotherTestFunction() { } i: console.log('test') I'm intrigued by the mystery of this code snippet. As is written, I am executing it in NodeJS version 16 or higher and trying to un ...

javascriptnode.jstypescriptvisual-studio-code

Looking for a JavaScript function that can utilize AJAX to execute PHP code and display the PHP output on the webpage

I've been trying to use JavaScript to execute some PHP code and then display the results on the page. I came across a piece of code that achieves this using ajax and by placing the PHP code in an external file. However, the code I found seems to show ...

javascriptphpajax

Tips for positioning icons inserted using the :before method

Is there a way to center align an icon added using the :before method? Below is the current code snippet: <div class="button submit"> <a class="submit check_car_search" href="#" >Some Text</a> </div> CSS: .button a{ backgr ...

htmlcss

Updating the quantity of a product within a state in React allows for easy manipulation of that

My scenario involved attempting to reduce the quantity of a product object in the UI by clicking a button, but the quantity did not update as expected. What is the recommended course of action in situations like this? let product={ a:1,b:2,c:3}; For examp ...

javascriptreactjs

Bootstrap is an outdated page template that lacks responsiveness

My code below features a page designed using Bootstrap HTML and CSS, but it doesn't look right on all devices. For example, on mobile devices, the grid appears zoomed in and unresponsive. I tried removing grid-template-columns: auto auto;, which fixed ...

htmlcssbootstrap-4

Mastering jQuery Selectors

<ul id="comment1"> <li>response1</li> <li>response2</li> <li>response3</li> <li>response4</li> <li>response5</li> <li>response6</li> <li>response7</li> <li ...

jqueryjquery-selectors

A more efficient method for passing a function as an argument using the keyword "this"

When it comes to passing a function as an argument that uses the this keyword, is there a preferred method or correct way to do so? An example would be helpful in understanding this concept better: For instance, if I want to fade out an object and then r ...

javascriptjquery