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（如果在事件发生时存在）……即使页面加载时不存在该事件。

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

1 个答案: