CODEWITHSUNDEEP
javascriptjquery
user3610762
user3610762

Reputation: 437

Clone of a div with its all content like button

Below is my code, in this code when I do .clone() of div photo then it only do clone of div 'photo' without button. I want to clone whole div with content (button and div here).How can I do it? Thank you

HTML:

      <div class="photo">
        <button>Delete</button>
      </div>

JavaScript:

         var $photo = $('.photo').clone();
         $('.photo').html($photo);

Upvotes: 0

Views: 53

Answers (2)

Will
Will

Reputation: 4155

Your code is working as expected in Chrome, Safari and Firefox (latest, OSX). Are you trying to clone the contents only?

With this HTML:

<div class="photo">
   <button>Delete</button>
</div>

and this JS:

var $photo = $('.photo').clone();
$('.photo').html($photo);

The new HTML looks like this:

<div class="photo">
    <div class="photo"> <-- because a clone of .photo is being inserted into .photo -->
        <button>Delete</button>
  </div>
</div>

If you append it to a new div, there is no .photo>.photo and the button is visible.

FIDDLE Fiddle.

Upvotes: 0

Kevin Cloet
Kevin Cloet

Reputation: 2976

The jQuery clone() function has an extra parameter called withDataAndEvents

withDataAndEvents (default: false) Type: Boolean A Boolean indicating

whether event handlers and data should be copied along with the elements. The default value is false

So in your case the following code should fix your problem.

var $photo = $('.photo').clone(true);

Small example:

http://jsfiddle.net/5tT3P/1/

Upvotes: 1

Related Questions