bind two events on click jquery

Question

I want to create a simple user interaction with a single button to start and stop recording audio,like whatsapp. I've looked on stackoverflow to understand if I was wrong, as I know it's not possible to bind on the same element two click events, so I've decided to test the code on codepen but it will not produce the expected result:

$('#audioBtn').on('click' ,function(e){
  e.preventDefault();
  if( $(this).hasClass('active') ){
    $(this).removeClass('active')
    .addClass('inactive');
    console.log('Recording stopped');
  }
});

$('#audioBtn').on('click' , function(e){
  e.preventDefault();
  if( $(this).hasClass('inactive') ){
    $(this).addClass('active')
    .removeClass('inactive');
    console.log('Recording start');
  }
});

What happening is that the two events are logged on console at the same time, but this is not what I want, I just want to use the same button to start and stop the recordings and change the icon while the user is recording the audio. Is there any way to do this?

@CarlBinalla I've tried, but will not work, I don't know if it's because I've tested on codepen or because the events it's not fired — jihuuNI, Sep 12 '19 at 09:48
I suggest you to have only one class ( active overwriting rules of default css ), and use "toggleClass" instead. — iguypouf, Sep 12 '19 at 09:51

score 6 · Accepted Answer · answered Sep 12 '19 at 09:49

I know it's not possible to bind on the same element two click events

This is not the case, it's entirely possible to bind multiple event handlers for the same event type to a single element. The problem in your case is because the two handlers are conflicting with each other; one sets the class and the other detects the class and removes it.

To fix this you need to use a single event handler which detects the state of the element and updates it based on that. In your case a simple else statement will work.

$('#audioBtn').on('click', function(e) {
  e.preventDefault();
  if ($(this).hasClass('active')) {
    $(this).removeClass('active').addClass('inactive');
    console.log('Recording stopped');
  } else {
    $(this).addClass('active').removeClass('inactive');
    console.log('Recording start');
  }
});

Taking that a step further, you can use toggleClass() to swap the classes:

$('#audioBtn').on('click', function(e) {
  e.preventDefault();
  
  if ($(this).hasClass('active')) {
    console.log('Recording stopped');
  } else {
    console.log('Recording start');
  }
  
  $(this).toggleClass('active inactive');
});

.active {
  color: #C00;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="audioBtn">Start/Stop</button>

Thanks a lot, it's working with charm, can I use the `.toggleClass()` also to swap the font-awesome icon right?. for now I'm using this code `$('#icon').removeClass('fas fa-microphone fa-2x') .addClass('fas fa-stop fa-2x');` — jihuuNI, Sep 12 '19 at 10:02
Yes, it would work for that. You don't need to include `fas` or `fa-2x` classes in there, as you remove then add it back, so it's redundant. Just use `$('#icon').toggleClass('fa-microphone fa-stop');` — Rory McCrossan, Sep 12 '19 at 10:04
If you have time, any suggestion also on this question will be appreciated https://stackoverflow.com/questions/57900841/auto-scroll-chat-window — jihuuNI, Sep 12 '19 at 10:09

tom · Answer 2 · 2019-09-12T09:54:09.103

1

To keep it simple you could just toggleClass() the classes:

$('#audioBtn').on('click' , function(e){
  e.preventDefault();
  $(this).toggleClass('active');
});

edited Sep 12 '19 at 09:54

answered Sep 12 '19 at 09:52

tom

9,550
6
30
49

Select the code and press CTRL+K, then CTRL+Return to save the edit – Rory McCrossan Sep 12 '19 at 09:53

score 1 · Answer 3 · answered Sep 12 '19 at 09:55

I think only active class is enough. you can check wather active or not and simply toggle it. you can do any action by checking the id having active class or not.

$('#audioBtn').on('click', function(e) {
  e.preventDefault();
  if ($(this).hasClass('active')) {
    $(this).toggleClass('active');
    console.log('Recording stopped');
  } else {
     $(this).toggleClass('active');
    console.log('Recording start');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="audioBtn"> click </div>

bind two events on click jquery

3 Answers3