Question

Using this jQuery:

$('#mycarousel li img').click(function(){
    $('#video').empty();
    var newId = $(this).attr('id');
    newId = newId.replace('vid','');
    $('#video iframe').attr('src', $('.vidHolder' + newId).html());
});

And the relevant HTML:

<ul id="mycarousel" class="jcarousel-skin-tango"><li><img src="pathtoimage" id="vid1" width="90" height="55" alt="" /></li>

<div id="video"><iframe src="pathtocurrentiframe" style="overflow:hidden"  id="fr"  width="425" height="480" frameborder="0" hspace="0" vspace="0" style="overflow:hidden;"></iframe><div id="dialog" title="" style="width: 0; height: 0;"></div></div>

<div class="vidHolder1" style="display: none;">newpathtoiframe</div>

Now for some reason, when i click the img it just removes the iFrame! Not changing the src like i need it to…

Answer 1

I’m guessing your problem is the first line of your click function:

$('#video').empty();

The .empty() method removes all child elements, which means it will remove your iframe.

The last line in your function then does nothing because no elements match the selector (but you won’t get an error because jQuery is quite happy to do nothing when no elements match the selector).