Detect which link was clicked

Question

Detect which link was clicked

Navigation

#1 by (5 votes)
#2 by (0 votes)

2

I'm trying to add some songs in a playlist , but I can not tell 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

asked by anonymous 07.11.2014 / 19:45

2 answers

0

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

In the function script user $ (this) .attr ('data-musicaid') to get the value

I've put an example here

07.11.2014 / 19:49

AJAX Request Error - success does not work How to check if the file name has 16 digits?

score 5 · Accepted Answer

As I 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'd like to make your code more jQuery-style, since you're using this library.

Before that, you need to resolve another issue: You can not have multiple elements with the same ID in HTML. Since you already have a class in these elements, simply remove the and IDs. In the fields inside the links, change the IDs by 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 clicked element is simply this . You do not even have to resort to the event.