JavaScript code called once don't execute second time

Question

I don't think that is the appropriate title but I will explain here better. I have an event that is happening on a click that shows a sticky footer on the bottom of the page. There you can see an HTML5 audio player and a close button. When I click the close button, nothing happens. No error in the browser console. Take a look at the code:

$(document).ready(function(e) {

  $(".playButton").click(function() {
    // Get the value of the button
    var val = $(this).val();

    // Paste the audio player
    $('#audioContainerBottom').html(show_audio_player(val));

    $('#navbarBottomFixed').show();

    audio_path = 'https://www.website.com/uploads/files/' + val;
    audio_core = $('#audio_core').attr('src', audio_path)[0];
    audio_core.play();

    $(this).hide();
    $(".stopButton").show();

  });


  $(".stopButton").click(function() {
    var val = $(this).val();
    $('#navbarBottomFixed').hide();

    audio_path = 'https://www.website.com/uploads/files/' + val;
    audio_core = $('#audio_core').attr('src', audio_path)[0];
    audio_core.stop;

    $(".stopButton").hide();
    $(".playButton").show();

  });

  $(".closeBottomSidebar").click(function(e) {
    $('#navbarBottomFixed').hide();
    alert('Closed!');
  });

});




function show_audio_player(audio) {
  var src = 'https://www.website.com/uploads/files/' + audio;
  audio = '<div class="col-md-10 col-xs-10"><audio controls  id="audio_core"> ' +
    '<source id="audio_source_id" autoplay src="' + src + '" type="audio/mpeg">' +
    'Your browser does not support the audio element.' +
    '</audio></div>' +
    '<div class="col-md-2 col-xs-2">' +
    '<button class="btn btn-danger" id="closeBottomSidebar">' +
    '<i class="fa fa-remove"></i> Close </button></div>';

  return audio;
}

.stopButton {
  display: none;
}

#playerContainer {
  display: none;
}

#navbarBottomFixed {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div id="navbarBottomFixed" class="navbar navbar-default navbar-fixed-bottom">
  <div class="container" id="audioContainerBottom">

  </div>
</div>

'stop' is a function and you need to run it, `audio_core.stop()` — Minan, Mar 03 '19 at 00:31
You didn't understood my problem. The code works perfectly, the first two buttons work perfectly, but this code does not close the static bottom navbar: $("#closeBottomSidebar").click(function(){ $('#navbarBottomFixed').hide(); }); — xttrust, Mar 03 '19 at 00:37
Why do you even comment if you don't understand the code I have just passed? When you press the Play button the code run this: $('#navbarBottomFixed').show(); — xttrust, Mar 03 '19 at 00:42
This: **.closeBottomSidebar** in your event handler declaration is different than this: **#closeBottomSidebar** in your HTML. — Randy Casburn, Mar 03 '19 at 00:43
@RachelGallen if you saw in the code, the HTML is saved in a javascript function. Once the button play is clicked it shows an audio player and a button that have the class of : closeBottomSidebar, there is my problem, when i click on the: closeBottomSidebar , the sidebar does not close. And the jQuery code is ok. No errors in console, nothing, but the sticky footer is still up. — xttrust, Mar 03 '19 at 00:44
@RandyCasburnI have fixed that, they are both pointing to the ID but still no response from the browser. — xttrust, Mar 03 '19 at 00:47
Great. Next, you are creating your audio player AFTER you set the listener. Each time you create a new player the listeners are not listening. You create a new player every time the play button is pushed. You have a classic race condtion with your listener set up. — Randy Casburn, Mar 03 '19 at 00:49
I have made this video for you so you can understand better. https://www.youtube.com/watch?v=5I6ZtxHxMrM&feature=youtu.be — xttrust, Mar 03 '19 at 01:02
@xttrust your function to showaudioplayer is not enclosed inside the jquery open/close brackets — Rachel Gallen, Mar 03 '19 at 01:08
I added the button on the page to try if i can close the sticky footer and it worked, but when I press the button that was called from JavaScript there is no response. — xttrust, Mar 03 '19 at 01:15
Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Louys Patrice Bessette, Mar 03 '19 at 01:57

score 1 · Accepted Answer · answered Mar 03 '19 at 01:55

The close button is dynamically created by the show_audio_player function. It is not present on page load.

So the click handler here:

$(".closeBottomSidebar").click(function(e) {
  $('#navbarBottomFixed').hide();
  alert('Closed!');
});

is not registered because $(".closeBottomSidebar") returns no element.

The solution is to use delegation:

$("#audioContainerBottom").on("click",".closeBottomSidebar",function(e) {
  $('#navbarBottomFixed').hide();
  alert('Closed!');
});

So the click handler is attached to #audioContainerBottom and delegates the event to .closeBottomSidebar if it exists at the time of the event... Even if it was not existing on page load.

Thank you very much. That was my problem. – xttrust Mar 03 '19 at 08:23 — xttrust, Mar 03 '19 at 08:23

JavaScript code called once don't execute second time

1 Answers1