Detect which link was clicked

Asked

Viewed 2,005 times

2

I’m trying to add a few songs to one playlist, but I can’t figure out which song was clicked to add.

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);
    });
});
javascript jquery
  • 2

    e.srcElement only works on IE (and I don’t even know if it still works on the new ones). This is the browser you’re testing on?

  • No, I’m testing on Firefox

  • Then change e.srcElement for e.target. I think that’s enough to work on the FF.

  • Now that I’ve noticed you’re using jQuery. I’ll post an answer simplifying your code.

2 answers

5


As mentioned above, you are using a property that only exists in IE (Event.srcElement), but is testing in Firefox. It’s simple to solve this, and I take advantage to leave your code more jQuery-style, since you are using this library.

Before that, you need to solve another problem: you cannot have multiple elements with the same ID in HTML. As you already have a class in these elements, simply remove the and Ids. In the fields within the links, exchange the Ids for 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>

Notice how simple it is: the element clicked is simply the this. You don’t even have to resort to the event.

  • It’s giving "UNDEFINED", I’m leaving now, at home I see if I did nothing wrong... vlws

  • You must have left something other than my code, because I have tested it now and it is working (click the Run button above to test)

  • Perfect! Thank you

0

In your "div" add a "data-musicaid attribute"

within the user script function $(this). attr('data-musicaid') to pick up the value

put an example here

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.