如何“删除”包含所有子元素的元素并将其“放置”在另一个 div 中，同时保留所有 jQuery 功能？

Question

First: It is difficult to post a example of the JavaScript and the HTML from the page because I could not get it to work in JSfiddle.

I have a page and with jQuery I simulate that there are two tabs. It is basically the same container but the content that is for the "second" tab is hidden. When you click on a element in the tabs it should fold open. It opens, but when you open the element the next element to the right goes down the open element. This leaves a big gap on the right because there is a hidden element there. How can I get the hidden elements and "remove" them from the DOM and then when I click on the second tab "paste" them there?

I have tried it with remove(), detach() and hide() but it does not work. With detach() it removes the hidden elements form the DOM, but does not paste them in the other tab.

Here is a example of my code:

function fixMyVouchers() {
var myVouchers = $("#my-vouchers");
var handedIn = $("#handed-in");
var handedInDeal = $(".handedIn");
var myVouchersContainer = $(".my-vouchers-container");

if(myVouchers.hasClass("active")) {
    handedInDeal.each(function() {
        $(this).detach();
        console.log("Removed " + handedInDeal.length + " handed in deals");
    });
}

handedIn.on("click", function() {
    myVouchersContainer.html(handedInDeal);
    console.log("click");
});
}

And here is the HTML Body Code:

<div class="row my-vouchers-container" id="myVouchers">
    <div class="mix col-xs-4 notExpired" data-my-enddate="88" data-my-purchase="0" data-hash="1-of-3-behandelingen-brazillian-wax-en-harsen-van-onderbenen-en-oksels-bij-ayurveda-beauty-spa-veda-lakshmi-utrecht" data-href="http://local.socialdeal.nl/voucher/info/64l50c6dg4heiy7yn4/" style="display: inline-block;">
        <div class="social-deal social-deal-etc">
            <div class="social-deal-image">
                <div class="social-deal-image-wrap">
                    <div class="social-deal-voucher-info"></div>
                    <img src="https://media.socialdeal.nl/deal/ayurveda-beauty-en-spa-veda-lakshmi-15062513000919.jpg" alt="Brazilian wax + harsen bij Ayurveda" title="Brazilian wax + harsen bij Ayurveda" class="sd-image-full" />
                </div>
                <div class="social-deal-diamond"> <i class="icon icon-category-beauty cat-beauty-color"></i> 
                </div>
            </div>
            <div class="social-deal-bottom">
                <div class="social-deal-info">
                    <h4 class="social-deal-title">Brazilian wax + harsen bij Ayurveda</h4>

                    <div class="social-deal-company">
                        <div class="social-deal-company-name">Ayurveda Beauty &amp; Spa | Veda Lakshmi</div>
                        <div class="social-deal-company-location dottedIfLong"> <i class="icon-pointer3"></i>
                            Utrecht</div>
                    </div>
                </div>
                <div class="voucher-statistics"> <span class="voucher-info">
                    Maanden resterend: 2                    <br/>
                    Vouchers: 1                </span>

                </div>
            </div>
        </div>
    </div>
    <div class="mix col-xs-4 notExpired" data-my-enddate="87" data-my-purchase="0" data-hash="authentiek-italiaans-3-gangen-keuzediner-bij-ristorante-brunos-in-hartje-utrecht-met-bij-het-hoofdgerecht-keuze-uit-alle-pastas-van-de-kaart-utrecht" data-href="http://local.socialdeal.nl/voucher/info/mqywycdt5t5n56y/" style="display: inline-block;">
        <div class="social-deal social-deal-etc">
            <div class="social-deal-image">
                <div class="social-deal-image-wrap">
                    <div class="social-deal-voucher-info">
                        <div class="social-deal-info-item">
                            <div class="social-deal-no-reservation" title="" data-toggle="tooltip" data-placement="left" data-original-title="Maak een reservering"></div>
                        </div>
                    </div>
                    <img src="https://media.socialdeal.nl/deal/ristorante-brunos-15062412531317.jpg" alt="Italiaans 3-gangendiner (25 keuzes)" title="Italiaans 3-gangendiner (25 keuzes)" class="sd-image-full" />
                </div>
                <div class="social-deal-diamond"> <i class="icon icon-category-food cat-food-color"></i> 
                </div>
            </div>
            <div class="social-deal-bottom">
                <div class="social-deal-info">
                    <h4 class="social-deal-title"> Italiaans 3-gangendiner (25 keuzes)</h4>

                    <div class="social-deal-company">
                        <div class="social-deal-company-name">Ristorante Bruno´s</div>
                        <div class="social-deal-company-location dottedIfLong"> <i class="icon-pointer3"></i>
                            Utrecht</div>
                    </div>
                </div>
                <div class="voucher-statistics"> <span class="voucher-info">
                    Maanden resterend: 2                    <br/>
                    Vouchers: 1                </span>

                </div>
            </div>
        </div>
    </div>
    <div class="mix col-xs-4 notExpired" data-my-enddate="79" data-my-purchase="0" data-hash="waardebon-twv-15-euro-te-besteden-op-het-gehele-assortiment-van-cacao-ambachtelijke-en-huisgemaakte-chocolade-en-bonbons-utrecht" data-href="http://local.socialdeal.nl/voucher/info/lg3j7cntmt969jw/" style="display: inline-block;">
        <div class="social-deal social-deal-etc">
            <div class="social-deal-image">
                <div class="social-deal-image-wrap">
                    <div class="social-deal-voucher-info"></div>
                    <img src="https://media.socialdeal.nl/deal/cacao-15061611000264.jpg" alt="Ambachtelijke chocolade en bonbons" title="Ambachtelijke chocolade en bonbons" class="sd-image-full" />
                </div>
                <div class="social-deal-diamond"> <i class="icon icon-category-store cat-store-color"></i> 
                </div>
            </div>
            <div class="social-deal-bottom">
                <div class="social-deal-info">
                    <h4 class="social-deal-title">Ambachtelijke chocolade en bonbons</h4>

                    <div class="social-deal-company">
                        <div class="social-deal-company-name">Cacao</div>
                        <div class="social-deal-company-location dottedIfLong"> <i class="icon-pointer3"></i>
                            Utrecht</div>
                    </div>
                </div>
                <div class="voucher-statistics"> <span class="voucher-info">
                    Maanden resterend: 2                    <br/>
                    Vouchers: 1                </span>

                </div>
            </div>
        </div>
    </div>
    <div class="mix col-xs-4 notExpired" data-my-enddate="77" data-my-purchase="0" data-hash="om-af-te-halen-bij-new-york-pizza-een-pizza-25-cm-naar-keuze-een-blikje-cola-of-fanta-perfect-als-je-even-geen-zin-hebt-om-te-koken-utrecht" data-href="http://local.socialdeal.nl/voucher/info/y0on0ietkt161j5/" style="display: inline-block;">
        <div class="social-deal social-deal-etc">
            <div class="social-deal-image">
                <div class="social-deal-image-wrap">
                    <div class="social-deal-voucher-info"></div>
                    <img src="https://media.socialdeal.nl/deal/new-york-pizza-utrecht-15061400070257.jpg" alt="New York Pizza + blikje cola of fanta" title="New York Pizza + blikje cola of fanta" class="sd-image-full" />
                </div>
                <div class="social-deal-diamond"> <i class="icon icon-category-food cat-food-color"></i> 
                </div>
            </div>
            <div class="social-deal-bottom">
                <div class="social-deal-info">
                    <h4 class="social-deal-title">New York Pizza + blikje cola of fanta</h4>

                    <div class="social-deal-company">
                        <div class="social-deal-company-name">New York Pizza Utrecht</div>
                        <div class="social-deal-company-location dottedIfLong"> <i class="icon-pointer3"></i>
                            Utrecht</div>
                    </div>
                </div>
                <div class="voucher-statistics"> <span class="voucher-info">
                    Maanden resterend: 2                    <br/>
                    Vouchers: 1                </span>

                </div>
            </div>
        </div>
    </div>
    <div class="mix col-xs-4 notExpired" data-my-enddate="60" data-my-purchase="0" data-hash="culinaire-workshop-lunchgerechten-maken-2-5-uur-of-een-workshop-summertapas-3-5-uur-of-een-van-gogh-schilderworkshop-6-5-uur-bij-grachtenatelier-utrecht" data-href="http://local.socialdeal.nl/voucher/info/x64exi3wv1c4iqwq6g/" style="display: inline-block;">
        <div class="social-deal social-deal-etc">
            <div class="social-deal-image">
                <div class="social-deal-image-wrap">
                    <div class="social-deal-voucher-info"></div>
                    <img src="https://media.socialdeal.nl/deal/het-grachtenatelier-15062316390867.jpg" alt="Culinaire workshop of schilderworkshop" title="Culinaire workshop of schilderworkshop" class="sd-image-full" />
                </div>
                <div class="social-deal-diamond"> <i class="icon icon-category-course cat-course-color"></i> 
                </div>
            </div>
            <div class="social-deal-bottom">
                <div class="social-deal-info">
                    <h4 class="social-deal-title">Culinaire workshop of schilderworkshop</h4>

                    <div class="social-deal-company">
                        <div class="social-deal-company-name">Het GrachtenAtelier</div>
                        <div class="social-deal-company-location dottedIfLong"> <i class="icon-pointer3"></i>
                            Utrecht</div>
                    </div>
                </div>
                <div class="voucher-statistics"> <span class="voucher-info">
                    Dagen resterend: 60                    <br/>
                    Vouchers: 1                </span>

                </div>
            </div>
        </div>
    </div>
    <div class="mix col-xs-4 notExpired" data-my-enddate="54" data-my-purchase="0" data-hash="gehele-dag-entree-met-gebruik-van-alle-saunafaciliteiten-bij-sauna-soesterberg-geniet-van-pure-rust-en-ontspanning-juni-2015-amersfoort-utrecht" data-href="http://local.socialdeal.nl/voucher/info/o37dkidt1t494v7/" style="display: inline-block;">
        <div class="social-deal social-deal-etc">
            <div class="social-deal-image">
                <div class="social-deal-image-wrap">
                    <div class="social-deal-voucher-info"></div>
                    <img src="https://media.socialdeal.nl/deal/sauna-soesterberg-15062612501019.jpg" alt="Bij Sauna Soesterberg een gehele dag sauna " title="Bij Sauna Soesterberg een gehele dag sauna " class="sd-image-full" />
                </div>
                <div class="social-deal-diamond"> <i class="icon icon-category-wellness cat-wellness-color"></i> 
                </div>
            </div>
            <div class="social-deal-bottom">
                <div class="social-deal-info">
                    <h4 class="social-deal-title">Bij Sauna Soesterberg een gehele dag sauna </h4>

                    <div class="social-deal-company">
                        <div class="social-deal-company-name">Sauna Soesterberg</div>
                        <div class="social-deal-company-location dottedIfLong"> <i class="icon-pointer3"></i>
                            Soesterberg</div>
                    </div>
                </div>
                <div class="voucher-statistics"> <span class="voucher-info">
                    Dagen resterend: 54                    <br/>
                    Vouchers: 4                </span>

                </div>
            </div>
        </div>
    </div>
    <div class="clearfix"></div>
</div>

The problem is that the handedIn elements are hidden. And are ruining the layout. I know how to remove them from the DOM but not how to paste them in the other tab.

Any help would be appreciated.

Answer 1

Well, you have a lot of code. What I could do is, I can replicate something quick and dirty to match your question title. Check out the snippet. The following snippet has two divs. One is an empty one, and the other has some elements with event handler attached to it. I understand that you need to move them without changing the event handlers.

 $(function () { $("#one a").click(function () { alert("Hi"); return false; }); a = $("#one").clone(true, true); a.appendTo("#two"); $("#one").html(""); });

 #one a {color: blue;} #two a {color: red;}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div id="one"> <a href="#" id="one-a">One A</a> </div> <div id="two"></div>

Test:

1. The colour should turn red.
2. Clicking on One should get an alert Hi .