CODEWITHSUNDEEP
jquery
DarkLeafyGreen
DarkLeafyGreen

Reputation: 70466

Clone and insert with jQuery

$(document).ready(function() {

     var clone = $("#me_flash_0").clone(true);

     if($('video').attr('class') == "pause_0"){
          $("#me_flash_0").remove();    
     }

     $('.top_item img').click(function(){
            $("#me_flash_0_container").html(clone);
            $(this).hide();     
     });

}

#me-flash_0 is an <embed> element. And #me_flash_0_container is the wrapping container. The problem is that the cloned object seems to be empty. html(clone) has no effect.

Firebug does not show any error.

Here is the relevant html

<div id="me_flash_0_container" class="me-plugin">
   <embed id="me_flash_0">
</div>
<video class="pause_199" width="586px" height="440" src="some link" autoplay="true" tabindex="0" style="display: none;"></video>

Any ideas?

Upvotes: 2

Views: 1180

Answers (4)

Inkbug
Inkbug

Reputation: 1692

    $(document).ready(function() {

         var clone = $("#me_flash_0").clone(true);

         if($('video').attr('class') == "pause_0"){
              $("#me_flash_0").remove();    
         }

         $('.top_item img').click(function(){
                $("#me_flash_0_container").children().remove();
                $("#me_flash_0_container").append(clone);
                $(this).hide();     
         });

    });

As @techfoobar wrote, you can't use .html() to append a jQuery object. You were also missing an end parentheses at the end of the JavaScript.

Edit: See this comment on a similar problem.

Upvotes: 1

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196197

The issues i see that might be causing this ...

  • You are caching the object on DOM ready.
    The object seems to be empty on start from the relevant code and that is what gets cached in the variable. (you should add a closing </embed> tag as well).
    I do not know what is supposed to appear in the embed element so not sure if the fact that nothing happens is the expected or not functionality..
  • the $('video').attr('class') will return the classes applied to the first video element in the DOM. In the example code the class_199. But you compare with class_0 so it will never match and not remove the #me_flash_0 element.

Upvotes: 0

Moin Zaman
Moin Zaman

Reputation: 25455

This appears to be a bug with jQuery and cloning object elements.

See http://bugs.jquery.com/ticket/10324

And a possible way of working around this is to copy the content of the object's parent container into a hidden textarea and then using this textarea's val() to clone a new object.

See a similar approach here: Cloning a silverlight embed object results in an empty white element

Upvotes: 1

techfoobar
techfoobar

Reputation: 66693

a) clone is a full jquery extended element, not a html string. It should work if you do .append(clone) instead of .html(clone)

b) clone is declared local to the ready(..) function. You might need to move it out into a global variable since you do not know in advance when the click event handler is triggered

Upvotes: 0

Related Questions