Load content into a div using jquery and data attributes
<p>Edit: I have this installed at www.dnadigitaltv.co.uk/testing/video but I just can't get it working. I've tried different versions of jquery, edited the code, tried alternative versions but just can't make it work. Why would it work in jsfiddle but not on my website?</p>

<p>I have a video page which uses modX vidlister. I've got the implementation working well but what I really would like to do is when a link is clicked it loads an image and a description into relevant divs.</p>

<p>I've been trying to use data attributes as my site is html5 but I just can't get it to work. At the moment I have this HTML.</p>

<pre><code>&lt;div id="vidImage"&gt;&lt;/div&gt;
&lt;div id="vidDescription"&gt;&lt;/div&gt;
&lt;div class="listing" data-image="SampleImage" data-description="Sample Description"&gt;
  &lt;div class="vidTitle"&gt;
    &lt;a href="http://www.youtube.com/watch?v=GDvI8UaxT9M" title="Sample   Video Title"&gt;Sample Video&lt;/a&gt;
  &lt;/div&gt;
  &lt;div class="vidDescription"&gt;
    &lt;p&gt;Lorem Ipsum dollar site amet. Lorem Ipsum dollar site amet. Lorem Ipsum
      dollar site amet.&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="vidDuration"&gt;
    &lt;p&gt;00:21:15&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="clearBoth"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>I then have the following jQuery</p>

<pre><code>$('div.vidTitle a').each(function(){
$(this).click(function(){
    var datasrc = $(this).parents('div.listing');
    $('#vidDescription').empty().prepend('&lt;p&gt;' + $(datasrc).data('description') + '&lt;/p&gt;');
    $('#vidImage').empty().prepend('&lt;p&gt;' + $(datasrc).data('image') + '&lt;/p&gt;');
    return false;
});
});
</code></pre>

<p>So the idea is that when you click on the video title it takes the content of data-image and data-description and shows it in the 2 divs (vidImage and vidDescription).</p>

<p>Completely lost now!</p>
