Question

我正在尝试制作收藏列表的声音。我可以让它起作用，但是当我刷新页面时，按下时声音将不起作用。如果我在列表中添加另一个收藏夹，它将再次起作用。

<div>
  <span>
 <a href="#/" id="Sound1" name="names" class="buttonsf" onClick="reply_click(event)">Sound1</a><a href="#/" class="fav">X</a></span>
 <span>
 <a href="#/" id="Sound2" name="names" class="buttonsf" onClick="reply_click(event)">Sound2</a><a href="#/" class="fav">X</a></span>
</div>
<div id="add">
//favorites get added here through append
</div>

的javascript

function createListeners() 
{
 let names = document.getElementsByName("names");
 for (let i = 0; i < names.length; i++) 
 {
  let name = names[i];
  name.removeEventListener('click', playAudio);
  name.addEventListener('click', playAudio);
 }
}

document.addEventListener('DOMContentLoaded', e => 
{
 createListeners();
});
//audio
function playAudio(e) 
{
 let el = e.currentTarget;
 var audio = new Audio();
 var src = "mp3/" + el.id + ".mp3";
 audio.src = src;
 audio.play();
 return audio;
}

更多JS但这是针对localStorage，怀疑这是问题

//favorited sound
$(document).ready(function() 
{
 var $ul = $('#add');
//get items from local storage
 if(localStorage.getItem('vkf-links'))
 {
 $ul.html(localStorage.getItem('vkf-links'));
 }
 $('.fav').click(function(e) 
 {
  e.preventDefault();
  var x = $(this).prevAll().attr('id');
  $('#add').append('<span><a href="#/" id="' + x + '" name="names" class="buttonsf" onload="createListeners()">' + x + '</a><button id="removebtn" class="remove">x</button><span>');
  createListeners();
  //save changes to localstorage
  localStorage.setItem('vkf-links', $ul.html());
 });
 //remove item
 $("#add").on('click','#removebtn',function() 
 {
  $(this).parent().remove();
  //save changes to localstorage
  localStorage.setItem('vkf-links', $ul.html());
 });
});

（我将音频更改为jsfiddle的链接，原来是“mp3 /”+ e.id +“。mp3”） https://jsfiddle.net/q15xoqp2/2/

Answer 1

在DOMContentLoaded中，您要为名为'names'的所有当前元素添加事件侦听器在$.ready中添加了更多这些元素。

由于jQuery 3 ready在您自己的DOMContentLoaded处理程序之后触发（可能是因为他们决定推迟ready）。

这意味着您将首先将侦听器仅添加到初始侦听器，然后仅添加 localStored 项目，这些项目不会附加到它们。

一些可能的修复，从清洁到肮脏：

添加一个事件监听器，该监听器将在整个文档的生命周期内委托给名为"names"的所有元素：
```
$(document).on('click', '[name="names"]', playAudio);
```

在createListeners处理程序的末尾调用您的初始ready：

$(document).ready(function() {
  //...
  $("#add").on('click','#removebtn',function() {
    //...
  });
  createListeners();
}

附加localeStored项后再次调用createListeners：

 if(localStorage.getItem('vkf-links')){
   $ul.html(localStorage.getItem('vkf-links'));
   createListeners();
 }

Updated fiddle

刷新时播放LocalStorage中的音频

1 个答案: