Search code examples
jqueryappendappendto

Jquery open a popup and nest it into the clicked div


I want to open a popup and nest it into a div. I'm using appendTo. my popup has to be open inside the clicked div. parent?

then append some html. what I'm missing?

fiddle: http://jsfiddle.net/XeELs/151/

 if ($("#events .event").hasClass("selected")) {
            $('.popup-event').parent().appendTo($(".event"));
            $(this).fadeIn();
            $('.popup-event').append('<span class="close-popup-event" />'); 
        }else{
            $('.close-popup-event').fadeOut('');
       }

HTML

<div class="event">
</div>



<aside class="popup-event">

</aside>

Solution

  • Check out this fiddle: http://jsfiddle.net/a9AHt/1/

    I wrapped the whole thing in <div id="events"> and changed the class to "selected" so the event would fire.

    If you take out the .parent() in the appendTo clause then it'll put the right element in.

    Also, to make it relative to where that .event div is, you'd want to references $(this) in the click event, so you don't accidentally get another div.

    Finally, add position:relative to the .event div to make sure it's always in that element.