Код JavaScript, вызываемый один раз, не выполняется второй раз - PullRequest
Новая
       11

Код JavaScript, вызываемый один раз, не выполняется второй раз

0 голосов
/ 03 марта 2019

Не думаю, что это подходящее название, но я объясню здесь лучше.У меня есть событие, которое происходит по щелчку, который показывает липкий нижний колонтитул в нижней части страницы.Там вы можете увидеть аудиоплеер HTML5 и кнопку закрытия.Когда я нажимаю кнопку закрытия, ничего не происходит.Нет ошибки в консоли браузера.Посмотрите на код: 

$(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>

1 Ответ

0 голосов
/ 03 марта 2019

Кнопка закрытия динамически создается функцией show_audio_player.Он не присутствует при загрузке страницы.

Итак, обработчик клика здесь: 

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

не зарегистрирован , поскольку $(".closeBottomSidebar") не возвращает элемента.

Решение состоит в том, чтобы использовать делегирование : 

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

Таким образом, обработчик щелчков присоединен к #audioContainerBottom и делегирует событие .closeBottomSidebar, если оно существует во времясобытие ... даже если его не было при загрузке страницы.

...