JavaScript 调用一次的代码不执行第二次

Question

我认为这不是合适的标题，但我会在这里更好地解释。我有一个事件发生在单击时，该事件在页面底部显示一个粘性页脚。在那里你可以看到一个 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>

Answer 1

关闭按钮由show_audio_player函数动态创建。它在页面加载时不存在。

所以这里的点击处理程序：

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

未注册，因为$(".closeBottomSidebar")returns没有元素。

解决方法是使用delegation:

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

因此点击处理程序附加到 #audioContainerBottom 并将事件委托给 .closeBottomSidebar 如果它在事件发生时存在...即使它在页面加载时不存在。

JavaScript 调用一次的代码不执行第二次

JavaScript code called once don't execute second time

javascript

jquery

callback

hide