Question

I’m using jQuery to append (move) a div into another div. This is working fine, but now I’m trying to make it a function and I’m running into some problems.

I have a few div‘s, two called #geregeld and #niet_geregeld. One called #content_vragen and a class called .container_vragen.

The .container_vragen is initally placed in the #content_vragen. In the .container_vragen is a button with this code:

 $('.submenu').on('click','.groen',function() {
            $(this).closest('.container_vragen').fadeOut(400, function() {
                $(this).closest('.container_vragen').css({overflow : 'hidden', color : 'green'});
                $(this).closest('.container_vragen').appendTo("#geregeld");
                $(this).closest('.container_vragen').fadeIn(400);
            });
        });

This action puts the .container_vragen in the #geregeld div. This works fine. But I want the user to be able to put the .container_vragen back into the #content_vragen div and this is proving to be a problem.

The code I’m using to do that is this:

function appendToContent_vragen() {
        $(this).closest('.container_vragen').fadeOut(400, function() {
            $(this).closest('.container_vragen').appendTo('#content_vragen');
            $(this).closest('.container_vragen').css({overflow : 'hidden', color : 'black'});
            $(this).closest('.container_vragen').fadeIn(400);
        });
    }

This also works. The problem is selecting the right div in the #geregeld div.

$('#geregeld , #niet_geregeld').on('click',function(){
        $('.container_vragen', this).click(appendToContent_vragen);
    });

If I use this code I have to click twice on the .container_vragen in #geregeld to get to the function appendToContent_vragen and obviously I want the user to click only once.

I have small jsFiddle with the code I’m using: http://jsfiddle.net/hE7Gm/

Answer 1

I’m getting confused by all the Dutch, but in this block:

$('#geregeld , #niet_geregeld').on('click',function(){
    $('.container_vragen', this).click(appendToContent_vragen);
});

you maybe have two problems. The first is that the inner call to .click does not make a click, but is registering a new click handler, just like .on('click', ...) does. I can’t tell if that’s a real problem or not because I can’t tell what the site is really supposed to do.

The second problem is setting this when appendToContent_vragen is called. If, as I suspect, you just want to call that function immediately (without a second click)

$('#geregeld, #niet_geregeld').on('click', function() {
     $('.container_vragen', this).each(appendToContent_vragen);
});

This works because .each will call the supplied function with this equal to the current element.

Also, in your animation functions there’s no need for all those .closest() calls – you already know that the passed element is a .container_vragen, so:

function appendToContent_vragen() {
    $(this).fadeOut(400, function() {
        $(this).appendTo('#content_vragen')
               .css({overflow : 'hidden', color : 'black'})
               .fadeIn(400);
    });
}