Javascript-форум - Не работает клик по плейлисту

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Не работает клик по плейлисту (https://javascript.ru/forum/misc/67254-ne-rabotaet-klik-po-plejjlistu.html)

Не работает клик по плейлисту

Доброго времени суток, форумчане, подскажите пожалуйста, почему не работает клик по плейлисту

<!DOCTYPE html>
<html>
<head>
	<title>Видеопортлет</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>  
</head>
<body>
<ul id="playlist">
  <H1>Плейлист:</H1>
  </ul>

     <video id="videoarea" controls="controls" width="640" height="480" poster="" src=""></video>
     
     <script>
 
    $.getJSON('playlist.json', function(data) {
        console.log(data);
            for(var i=0;i<data.playlist.length;i++){
              $('#playlist').append('<li>' + data.playlist[i].moviename + '</li>');
             $("#playlist li").attr({
            "movieurl": data.playlist[i].movieurl,
            "moviesposter": data.playlist[i].moviesposter           
        })
    };
});
  
 
    
     $('#playlist li').on('click', function() {
        $("#videoarea").attr({
            "src": $(this).attr("movieurl"),
            "poster": $(this).attr("moviesposter"),
            "autoplay": "autoplay"
        })
    });
         
    $("#videoarea").attr({
        "src": $("#playlist li").eq(0).attr("movieurl"),
        "poster": $("#playlist li").eq(0).attr("moviesposter")
    });
  
  
 
  /* запрет контекстного меню на всех элементах video на странице*/
    $('video').bind('contextmenu', function(e) {
        return false;
    });

</script>
    <style>
      #playlist {
    display:table;
}
#playlist li{
    cursor:pointer;
    padding:8px;
}

#playlist li:hover{
    color:blue;                        
}
#videoarea {
        /*float:left;*/
    width:640px;
    height:480px;
    margin:10px;    
    border:1px solid silver;
}
      #playlist {
      float:left;
      }
      
      
      
      video::-internal-media-controls-download-button {
    display:none;
}

video::-webkit-media-controls-enclosure {
    overflow:hidden;
}

video::-webkit-media-controls-panel {
    width: calc(100% + 30px); /* Adjust as needed */
}
        </style>
</body>
</html>

Сначала вывожу информацию из json файла ({
"playlist": [{
"moviename" : "Видео1",
"movieurl": "mult.jpeg",
"moviesposter": ""
}, {
"moviename" : "Видео2",
"movieurl": "mult.jpeg",
"moviesposter": ""
}, {
"moviename" : "Видео3",
"movieurl": "mult.jpeg",
"moviesposter": ""
}]
})
в теги <li>, это работает

В консоли браузера вижу, что аттрибуты тега <li> заполнены данными из json файла

<ul id="playlist">
  <h1>Плейлист:</h1>
<li movieurl="mult.jpeg" moviesposter="">Видео1</li>
<li movieurl="mult.jpeg" moviesposter="">Видео2</li>
<li movieurl="mult.jpeg" moviesposter="">Видео3</li>
</ul>

     <video id="videoarea" controls="controls" width="640" height="480" poster="" src=""></video>

Т.е. список есть, а клик по нему не срабатыват почему то

$('#playlist li').on('click', function() {
        $("#videoarea").attr({
            "src": $(this).attr("movieurl"),
            "poster": $(this).attr("moviesposter"),
            "autoplay": "autoplay"
        })
    });

AlexTrader,

<!DOCTYPE html>
<html>
<head>
  <title>Видеопортлет</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
   <style>
      #playlist {
    display:table;
}
#playlist li{
    cursor:pointer;
    padding:8px;
}

#playlist li:hover{
    color:blue;
}
#videoarea {
        /*float:left;*/
    width:640px;
    height:480px;
    margin:10px;
    border:1px solid silver;
}
      #playlist {
      float:left;
      }



      video::-internal-media-controls-download-button {
    display:none;
}

video::-webkit-media-controls-enclosure {
    overflow:hidden;
}

video::-webkit-media-controls-panel {
    width: calc(100% + 30px); /* Adjust as needed */
}
        </style>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body><H1>Плейлист:</H1>
<ul id="playlist"></ul>

     <video id="videoarea" controls="controls" width="640" height="480" poster="" src=""></video>

     <script>
 var data = {
 "playlist": [{
 "moviename" : "Видео1",
 "movieurl": "http://www.w3schools.com/Tags/mov_bbb.mp4",
 "moviesposter": "http://mkrf.ru/upload/iblock/5c8/5c81e230bc528d6570181d6465d19200.jpg"
 }, {
 "moviename" : "Видео2",
 "movieurl": "http://www.w3schools.com/Tags/mov_bbb.mp4",
 "moviesposter": "http://centromujer.republica.com/files/2014/04/rio-2-trailer.jpg"
 }, {
 "moviename" : "Видео3",
 "movieurl": "http://www.w3schools.com/Tags/mov_bbb.mp4",
 "moviesposter": "http://dreammobile.ucoz.ru/_ld/1/12924.jpg"
 }]};
 function s(b) {
    $.each(b.playlist, function(b, a) {
        b || $("#videoarea").attr({
            src: a.movieurl,
            poster: a.moviesposter
        });
        $("<li>", {
            click: function() {
                $("#videoarea").attr({
                    src: a.movieurl,
                    poster: a.moviesposter,
                    autoplay: "autoplay"
                })
            },
            text: a.moviename
        }).appendTo("#playlist")
    })
};
//$.getJSON('playlist.json',s) раскомментровать
s(data)//убрать
  /* запрет контекстного меню на всех элементах video на странице*/
    $('video').bind('contextmenu', function(e) {
        return false;
    });

</script>

</body>
</html>

рони,
Спасибо большое!!!