Jquery open a popup and nest it into the clicked div

Question

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>

can you create a [jsfiddle](http://jsfiddle.net) for this example? — Jakub, Apr 26 '12 at 15:09
Show some markup, and clarify the question please as the wording makes your desired intent unclear. — Mark Schultheiss, Apr 26 '12 at 15:13
I want to open my popup which is a separated html into the clicked div — DD77, Apr 26 '12 at 15:17
`if ($("#events .event").hasClass("selected")) {` doesn't work with your jsfiddle example — sirmdawg, Apr 26 '12 at 15:18

Cole · Answer 1 · 2012-04-26T15:24:23.930

0

Your first statement is backwards. Either change it to $(".event").appendTo($('.popup-event').parent()); or change appendTo to be append and it will work. Furthermore, verify that both of your jQuery object are not empty.

edited Apr 26 '12 at 15:24

answered Apr 26 '12 at 15:18

Cole

119
13

score 0 · Answer 2 · answered Apr 26 '12 at 15:21

You might try something like this:

http://jsfiddle.net/mkprogramming/XeELs/150/

$('.event a').click(function() {
        $('.popup-event').appendTo($(this).parent());
        $('.popup-event').fadeIn();
        $('.popup-event').append('<span class="close-popup-event" />'); 
});

I think the key part to notice is the $(this).parent()

score 0 · Answer 3 · answered Apr 26 '12 at 15:25

I think there are some mistakes in your code. First, I would say it would be better to use id instead of class for popup-event as (as far as I understand) it is unique.

Also, when you write

 $('.popup-event').parent().appendTo($(".event"));

you try to append the parent of your "popup-event" div to your "event" div.

What I would do (If I understand correctly) is this:

$("div.event").bind('click', function() {
 $("#popup-event").appendTo($(this));
});

assuming you've put an id on "popup-event" and you want it to appear inside the clicked div. If you want it to appear inside the parent of the clicked div, you would append to

$(this).parent()

score 0 · Accepted Answer · answered Apr 26 '12 at 15:29

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.

Jquery open a popup and nest it into the clicked div

4 Answers4