[Jquery/js] Data van een span halen als user stopt met typen

[Beatboxx]

Ik ben bezig met een formulier dat met Ajax moet worden verstuurd. De bedoeling is dat data in dit formulier automagisch worden opgeslagen, dus niet alleen via de save-knop, maar ook als een user stopt met typen. Hiervoor heb ik deze js geschreven:

JavaScript:

        $('#tester').bind('dblclick',
        function(){
            $(this).attr('contentEditable',true).addClass('editable');
        }); //Make it possible to edit the content of a span when it is double clicked

        //setup before functions
            var typingTimer;                //timer identifier
            var doneTypingInterval = 2000;  //time in ms, ie 2 secs
            
            //on keyup, start the countdown
            $('.editable').keyup(function(){
                clearTimeout(typingTimer);
                if ($('.editable').val) {
                    typingTimer = setTimeout(doneTyping, doneTypingInterval);
                }
            });
        
        //user is "finished typing," do something
        function doneTyping () {
            var x = $(".editable").html();
            var x = x.replace(/(<([^>]+)>)/ig,""); //Remove html shizzle
            console.log(x);     
        }

Probleem; er gebeurt helemaal niks. Er zal vast ergens een miniscuul (of iets groter) foutje zitten, maar zou iemand even kunnen kijken, want ik kom er echt niet uit....
Jsfiddle: http://jsfiddle.net/AyQMy/

[DanielG]

Je doet op regel 3: '.addClass('editable');' nadat iemand 'double click' heeft gedaan op je span.

maar op regel 11 heb je al "$('.editable')" met keyup event.

Die class bestaat niet voordat iemand 'double click' heeft gedaan op je span (dus er is geen keyup even aan iets gekoppeld).

[Beatboxx]

Klopt, maar dat maakt toch niet uit? Die data is toch pas relevant wanneer contenteditable aanstaat?

[DanielG]

Op regel 11 gebruik je $('.editable'), dit haalt alle elementen in je DOM op met de class editable. Zodra je javascript geladen wordt zijn dat 0 elementen.

Als je daarna dynamisch elementen maakt met deze class maakt dan niet uit omdat regel 11 allang is uitgevoerd (en niet meer wordt aangeroepen).

volgens mij denk je dat je met "$('.editable').keyup" ervoor zorgt dat als er een element deze class krijg dat je javascript functie automagisch gekoppeld wordt aan dat element. Dat is niet hoe JS werkt.

[Beatboxx]

Ik moet inderdaad nog veel leren... Hij werkt nu, voor de geinteresseerden, check hier!

http://jsfiddle.net/AyQMy/1/

[C0rnelis]

Beatboxx schreef op woensdag 27 februari 2013 @ 21:15:
Ik moet inderdaad nog veel leren... Hij werkt nu, voor de geinteresseerden, check hier!

http://jsfiddle.net/AyQMy/1/

Het is nog niet af, telkens als je nu dubbelklikt wordt het keyup - event opnieuw! gebind aan die elementen die worden gevonden door de selector .editable. Tenzij je nu van plan bent het weer te unbinden nadat je klaar bent, kan ik je aanraden http://api.jquery.com/on/ eens te bekijken.

[Bosmonster]

DanielG schreef op woensdag 27 februari 2013 @ 21:10:

volgens mij denk je dat je met "$('.editable').keyup" ervoor zorgt dat als er een element deze class krijg dat je javascript functie automagisch gekoppeld wordt aan dat element. Dat is niet hoe JS werkt.

Wel als je event delegation gebruikt.

JavaScript:

$('.container').on('keyup', '.editable', function(){ /* ... */ });

Weet niet hoe je html structuur er uit ziet, maar je delegeert events hiermee naar .container (een parent). En ongeacht of ze later toegevoegd zijn zullen events op .editable dus afgehandeld worden.