2

Estou tentando adicionar umas músicas numa playlist, porém não consigo saber qual música foi clicada para adicionar.

HTML

<div class='album-musicas'>  
  <a href='#' id='add-musica-playlist-link' class='addMusicaPlaylistLink'>
    <input type='hidden' id='id-musica' value='1' name='dados'> 
    <input type='hidden' id='nm-musica' value='Musica 1' name='dados'>   
    <input type='hidden' id='nm-cantor' value='Cantor 1' name='dados'>
    <img src='images/button-add-13.png' title='Adicionar à playlist' > 
  </a>
</div>

<div class='album-musicas'>
  <a href='#' id='add-musica-playlist-link' class='addMusicaPlaylistLink'>
    <input type='hidden' id='id-musica' value='2' name='dados'> 
    <input type='hidden' id='nm-musica' value='Musica 2' name='dados'> 
    <input type='hidden' id='nm-cantor' value='Cantor 2' name='dados'>
    <img src='images/button-add-13.png' title='Adicionar à playlist' > 
  </a>
</div>

JavaScript

$(document).on('click', '#add-musica-playlist-link', function () {

    var botoes = document.getElementsByClassName("addMusicaPlaylistLink");

    for(var i = 0; i < botoes.length; i++) botoes[i].addEventListener("click", function(e){

        var musica_id = e.srcElement.getElementsByTagName("input")[0].value;

        alert(musica_id);
    });
});
4
  • 2
    e.srcElement só funciona no IE (e nem sei se ainda funciona nos mais novos). É nesse browser que você está testando?
    – bfavaretto
    Commented 7/11/2014 às 18:47
  • Não, estou testando no Firefox
    – Ricardo
    Commented 7/11/2014 às 18:51
  • Então troque e.srcElement para e.target. Acredito que baste isso para funcionar no FF.
    – bfavaretto
    Commented 7/11/2014 às 19:10
  • Agora que reparei que está usando jQuery. Vou postar uma resposta simplificando seu código.
    – bfavaretto
    Commented 7/11/2014 às 19:11

2 Respostas 2

5

Como comentei acima, você está usando uma propriedade que só existe no IE (Event.srcElement), mas está testando no Firefox. É simples resolver isso, e aproveito para deixar seu código mais no estilo do jQuery, já que você está usando essa biblioteca.

Antes disso, precisa resolver outro problema: você não pode ter vários elementos com o mesmo ID no HTML. Como você já tem uma classe nesses elementos, simplesmente remova os e IDs. Nos campos dentro dos links, troque os IDs por classes:

$(document).on('click', '.addMusicaPlaylistLink', function () {
    var input = $(this).find('.id-musica');
    alert(input.val())
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='album-musicas'>  
  <a href='#' class='addMusicaPlaylistLink'>
    <input type='hidden' class='id-musica' value='1' name='dados'> 
    <input type='hidden' class='nm-musica' value='Musica 1' name='dados'>   
    <input type='hidden' class='nm-cantor' value='Cantor 1' name='dados'>
    <img src='images/button-add-13.png' title='Adicionar à playlist' > 
  </a>
</div>

<div class='album-musicas'>
  <a href='#' class='addMusicaPlaylistLink'>
    <input type='hidden' class='id-musica' value='2' name='dados'> 
    <input type='hidden' class='nm-musica' value='Musica 2' name='dados'> 
    <input type='hidden' class='nm-cantor' value='Cantor 2' name='dados'>
    <img src='images/button-add-13.png' title='Adicionar à playlist' > 
  </a>
</div>

Repare como é simples: o elemento clicado é simplesmente o this. Não precisa nem recorrer ao evento.

3
  • Está dando "UNDEFINED", estou saindo agora, em casa vejo se não fiz nada errado... Vlws
    – Ricardo
    Commented 7/11/2014 às 19:22
  • Você deve ter deixado alguma coisa diferente do meu código, porque testei agora e está funcionando (clique no botão de executar acima para testar)
    – bfavaretto
    Commented 7/11/2014 às 19:30
  • Perfeito! Valeu
    – Ricardo
    Commented 8/11/2014 às 0:39
0

Na sua "div" adicione um atributo "data-musicaid"

dentro da função script user $(this).attr('data-musicaid') para pegar o valor

coloquei um exemplo aqui

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .