Utiliser append pour insérer l'ID et avoir un son

Question

Je suis dans les premiers travaux d'essayer d'ajouter une liste de favoris à une table d'harmonie (j'ai déjà les trucs localstorage au travail). La façon dont j'ai le travail audio est qu'il obtient l'ID du bouton pressé et ajoute .mp3 à celui-ci puis le joue, ce qui fonctionne. J'ai un code où lorsque vous appuyez sur un bouton, il prend son identifiant et crée un autre bouton, insérant cet ID dans celui qui devrait jouer le son de la même manière que les autres boutons, mais ce n'est pas le cas. Des idées? Le code est littéralement le même, mais ne semble pas jouer de son quand .append crée le bouton.

favorite.js pertinentes Javascript

//audio 
 
var audios = Array.prototype.map.call(
 
    document.getElementsByName("names"), 
 
    function(el) { 
 
    var audio = new Audio(); 
 
    var src = "mp3/" + el.id + ".mp3"; 
 
    el.onclick = function() { 
 
     audio.src = src; 
 
     audio.play(); 
 
    }; 
 
    return audio; 
 
    }); 
 

 
//favorited sound 
 
function reply_click(clicked_id) { 
 
    alert("Added to Favorites"); 
 
    $('#add').append('<span><a href="#/" id="' + clicked_id + '" name="names" class="buttonsf">Sound1</a></span>'); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <a href="#/" id="Sound1" onClick="reply_click(this.id)">Sound1</a> 
 
</div> 
 
<div id="add"> 
 

 
</div> 
 
<script type="text/javascript" src="favorite.js"></script>

Answer 1

La valeur passée à l'événement click devrait prendre un Event

donc, en changeant onclick="reply_click(this.id)"-onclick="reply_click(event)" passera l'événement à la fonction .

changer le paramètre de la fonction clicked_id-e (ou ce que vous voulez qu'il soit appelé signifiant qu'il est un événement), vous pouvez accéder à l'identifiant à l'aide e.currentTarget.id et l'insertion que.

Se mon exemple ci-dessous:

//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; 
 
} 
 

 
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() 
 
}) 
 

 
//favorited sound 
 
function reply_click(e) { 
 
    alert("Added to Favorites"); 
 
    $('#add').append('<span><a href="#/" id="' + e.currentTarget.id + '" name="names" class="buttonsf">Sound1</a></span>'); 
 
    createListeners() 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <a href="#/" id="Sound1" onClick="reply_click(event)">Sound1</a> 
 
</div> 
 
<div id="add"> 
 

 
</div> 
 
<script type="text/javascript" src="favorite.js"></script>