Question

My current script is a little broken. Clicking on the link in the table successfully creates my div overlay. Then I close my div and click on another link and the div overlay opens again the close button stops working.

I’m guessing the problem is that that DOM doesn’t recognize my empty divs again after I use “replaceWith”.

Any help would be appreciated.

<table id="tableBin" border="0">
    <tr>
        <th>name</th>
        <th>description</th>
    </tr>
<tbody>
    <tr>
        <td><a href="clip/location/A001C012_111129_R1VL.mov">A001C012_111129_R1VL.mov</a></td>
        <td>Adipiscing elit. Fusce bibendum, leo non.</td>
    </tr>
    <tr>
        <td><a href="clip/location/A001C012_111130_R1VL.mov">A001C012_111130_R1VL.mov</a></td>
        <td>Consectetur adipiscing elit. Fusce bibendum, leo non.</td>
    </tr>
</tbody>

</table>

<div id="overlay">
    <div id="blackOut" class="hide">
        <div id="box" class="hide">
            <div id="controls" class="hide"><a href="#"><img border="0" alt="close" width="25px" hieght="25px" src="images/close.png"></a></div>
        </div>
    </div>
</div>

<script>
    $("#tableBin a").on("click", function(e) {
        e.preventDefault();
        var url = $(this).attr("href");
        var video = jQuery('<embed width="640" height="375" ShowControls=1 src="'+url+'" /></embed>');

        $('#blackOut').removeClass("hide").addClass("blackOut");
        $('#box').removeClass("hide").addClass("box");
        $('#controls').removeClass("hide").addClass("controls");
        $('#box').append(video);
    });
</script>

Answer 1

This seems to work:

http://jsfiddle.net/aramk/WesNb/2/

$(document).ready(function () {
    $("#tableBin a.video").click(function(e) {
            e.preventDefault();
            var url = $(this).attr("href");
            var video = $('<embed width="640" height="375" ShowControls=1 src="'+url+'" /></embed>');

            $('#overlay').removeClass("hide");
            $('#blackOut').removeClass("hide").addClass("blackOut");
            $('#box').removeClass("hide").addClass("box");
            $('#controls').removeClass("hide").addClass("controls");
            $('#video-container').removeClass("hide").html(video);
        });

        $("#close-button").click(function(e) {
            $('#overlay').addClass("hide");
            $('#video-container').addClass("hide").html("");
            return false;
        });
});
​

I wasn’t sure if you wanted to replace the playing video or not, so I’ve added a container which has its contents replaced with the loaded video on each click.

Also, your original code replaced everything when close was clicked – this is very destructive and unmaintainable. Changing anything in the HTML would mean changing everything in the JS – in a string – which is very messy.