Jplayer - creating a dynamic playlist

Question

I am using jPLayer to play mp3 for a project. They will be loaded dynamically from the database. I am trying to create links that will download the selected mp3 to the player. I currently have one that doesn't work. I believe that I am doing something wrong with the click event telling which mp3 to play. If I set the path hard, it works fine, but I don’t want to configure it, because there can be hundreds of media files.

  $ (document) .ready (function () {

     $ ("# jquery_jplayer_1"). jPlayer ({
          ready: function () {
             $ (this) .jPlayer ("setMedia", {
             mp3: "http://www.jplayer.org/audio/mp3/Miaow-07-Bubble.mp3"
         }). jPlayer ("play");
          },
          ended: function (event) {
         $ (this) .jPlayer ("play");
          },
          swfPath: "js",
          supplied: "mp3"
     });

        $ (". song"). click (function () {
        $ ("# jquery_jplayer_1"). jPlayer ("setMedia", {
         mp3: $ (this) .attr ("name"). val ();
        });
         $ ("# jquery_jplayer_1"). jPlayer ("play");
     return false;
     });

 });

  <a href="#" class="song" name="http://www.jplayer.org/audio/mp3/Miaow-07-Bubble.mp3">Song 3</a> <a href="#" class="song" name="http://www.jplayer.org/audio/mp3/Miaow-04-Lismore.mp3">Song 4</a> 

code>

This code works, but I would like information from href

  $ (". song"). click (function () {
         $ ("# jquery_jplayer_1"). jPlayer ("setMedia", {
             mp3: "http://www.jplayer.org/audio/mp3/Miaow-04-Lismore.mp3"
         });
         $ ("# jp_playlist_1 ul"). html (" 

Lismore - MP3 "); $ (" # jquery_jplayer_1 "). JPlayer (" play "); return false;});

Answer 1

Try changing this $(this).attr("name").val(); on $(this).attr("name");

also a good idea:

 <a class="song" href="http://www.jplayer.org/audio/mp3/Miaow-07-Bubble.mp3">Song 3</a> 

and then

 $('.song').click(function(eve){ eve.preventDefault(); ... ... ... }); 

and of course,

 mp3: $(this).attr("href")