调用一次的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")没有返回任何元素。

解决方案是使用delegation：

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

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