jQuery functie aanroepen werkt niet.

[MrVegeta]

Ik ben onderhand wel aardig klaar met mijn kleine jQuery project en nu ben ik bezig om de code te verbeteren, een tip die ik kreeg was functies aanroepen. Dus daar ben ik mee bezig gegaan, maar ik ben tegen een klein probleem aangelopen. Ik kan de correcte div niet aanroepen.

Ik heb deze functie,

JavaScript:

 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);
    });
}

En die wil ik aanroepen met deze on click.

JavaScript:

$('#geregeld , #niet_geregeld .container_vragen').on('click',appendToContent_vragen);

Maar deze selector werkt niet. Ik wil dus het element .container_vragen de click functie geven en dit element kan in de div #geregeld of #niet_geregeld staan. Als ik de code zo doe

JavaScript:

$('.container_vragen').on('click',appendToContent_vragen);

Dan voert die wel de functie uit maar in de verkeerde div.

[Strunkie]

Je hebt nu:
1e selector: #geregeld
2e selector: #niet_geregeld -> .container_vragen

Klopt dit?


En je code kan een stuk overzichtelijker:

code:

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

[MrVegeta]

Het zou zo moeten zijn dat de class .container_vragen die div is waar op geklikt wordt. En deze class staat in de id #geregeld of #niet_geregeld, maar ik kan dus die niet goed selecteren.

[Strunkie]

Umh opmerkelijk stukje code.
Je wil toevoegen als iemand op .container_vragen drukt.

Dus het is altijd

code:

$('.container_vragen').on('click',appendToContent_vragen);

Vervolgens heb je je functie die eerst opzoek gaat naar .container_vragen?
Container vragen is in dit geval $(this) dus var el = $(this).closest('.container_vragen'); kan worden teruggezet naar $(this).

code:

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

Als je je functie uitvoer doet ie dit:
1. .container uitfaden
2. .container toevoegen aan #content_vragen
3. .container infaden

Wil je dit?

Edit 1: Wat trouwens wel is: op het moment dat je el geappend hebt naar #container_vragen is el niks meer waard. K*t volgens mij klopt je code idd wel.

Kan je wat meer HTML delen?

[ Voor 10% gewijzigd door Strunkie op 10-01-2013 19:54 ]

[Strunkie]

Als je :

code:

$('.container_vragen').on('click',appendToContent_vragen);

gebruikt aan welke div voegt hij .container_vragen toe?

[MrVegeta]

Het element .container_vragen staat in de div #content_vragen. Er is een functie die de class .container_vragen naar één van de volgende 2 id's stuurt #geregeld en #niet_geregeld (dat werkt prima). De bedoeling is dat die dus uit die twee id's weer terug kan naar #content_vragen.

http://jsfiddle.net/u2yJD/ hier is de jsFiddle van het project. Het werkt nu, de functie 'appendToContent_vragen' wordt uitgevoerd, maar er moet twee keer op het element 'container_vragen' worden geklikt.

JavaScript:

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

[PressPlayOnTape]

MrVegeta schreef op donderdag 10 januari 2013 @ 20:13:
http://jsfiddle.net/u2yJD/ hier is de jsFiddle van het project. Het werkt nu, de functie 'appendToContent_vragen' wordt uitgevoerd, maar er moet twee keer op het element 'container_vragen' worden geklikt.

JavaScript:

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

En als je dat stukje code nou eens vervangt door:

JavaScript:

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

Dan hoef je nog maar 1x te klikken. Of is dat niet wat je wilt?

[MrVegeta]

JavaScript:

$(document.body).on('click', '#geregeld .container_vragen', appendContainerVragenToContent_vragen)

Uiteindelijk was dit de code die het functioneel maakte.