jquery - リンクをクリックしてjsonを取得し、カラーボックスウィンドウでajax結果を開きます

Question

クリックできるリンクがあり、ajax を使用し、json データを取得してから、ループしてデータを div に追加します。この部分は正常に動作します。#IndeedResults に入れられた結果をカラーボックスに表示したいのですが、うまくいきません。ここに私が持っているものがあります:

<p><span id="IndeedJobs">Click here to see job opportunities.</span></p>
<div id="IndeedResults"></div>
<br /><br />
<script type="text/javascript">
   $(document).ready(function () {

       $('#IndeedJobs').click(function () {
           var vURL = "http://api.url.com";

           $.ajax({
                type: 'GET',
                url: vURL,
                dataType: 'jsonp',
                beforeSend: function() {
                    $('#IndeedResults').empty();
                    $('#IndeedResults').show();
                },
                complete: function() {
                    $('#IndeedJobs').hide();
                },
                success: function(data) {

                    var x = data.results;
                    for (var i=0; i<x.length; i++)
                    {
                        var vJobTitle = x[i].jobtitle;
                        var vCompany = x[i].company;
                        var vCity = x[i].city;
                        var vState = x[i].state;
                        var vCountry = x[i].country;
                        var vLocation = x[i].formattedLocation;
                        var vSource = x[i].source;
                        var vDate = x[i].date;
                        var vSnippet = x[i].snippet;
                        var vResultURL = x[i].url;
                        var vRelativeTime = x[i].formattedRelateiveTime;
                        var vHTML = '<hr>' + vJobTitle + '<br />'
                        vHTML += vCompany + '<br />'
                        vHTML += vLocation + '<br />'
                        vHTML += '----------------'
                        vHTML += '<p>' + vSnippet + '<span><a href="' + vResultURL  + '">View More</a></span><br /><b>' + vDate + '</b></p>'
                        vHTML += '----------------'


                        $('#IndeedResults').append(vHTML);



                    }
                    $('#IndeedResults').colorbox({inline:true});

                },error: function (jxhr, msg, err) {
                   $('#IndeedResults').html("Data NOT posted. Error returned:" + JSON.stringify(jxhr));
               }
            });



        });
   });
</script>

期待される結果は、#IndeedResults に追加した html コードをカラーボックス ウィンドウに出力することです。