Question

Hello there i got some code here;

    <script type="text/javascript">
        $(function(){
        var playListURL = 'http://gdata.youtube.com/feeds/api/playlists/8BCDD04DE8F771B2?v=2&alt=json&callback=?';
        var videoURL= 'http://www.youtube.com/watch?v=';
        $.getJSON(playListURL, function(data) {
            var list_data="";
            $.each(data.feed.entry, function(i, item) {
                var feedTitle = item.title.$t;
                var feedURL = item.link[1].href;
                var fragments = feedURL.split("/");
                var videoID = fragments[fragments.length - 2];
                var url = videoURL + videoID;
                var thumb = "http://img.youtube.com/vi/"+ videoID +"/default.jpg";
        HERE>>> list_data += '<button onclick="$('#bgndVideo').changeMovie('+ url +')">'+ feedTitle +'</button>';
            });
            $(list_data).appendTo(".playlist_elements");
        });
        });  
</script>

This isnt working because of “$(‘#bgndVideo’)” fragment that i need to pass as a text to be rendered in html so it looked like this in html:

<button onclick="$('#bgndVideo').changeMovie('http://www.youtube.com/watch?v=SOME_VIDEO_ID')"> Test </button>

How could i fix this so “$(‘#bgndVideo’)” fragment would be treated as a text?

Answer 1

You would need to escape the 's:

list_data += '<button onclick="$(\'#bgndVideo\').changeMovie(\''+ url +'\')">'+ feedTitle +'</button>';

However, a cleaner approach might be something like this:

$list_data = $("<button>").html(feedTitle)
                  .click(function(){
                       $('#bgndVideo').changeMovie(url);
                  });