• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Keypress innerhalb von li

blabla333

Mitglied
Ich stehe auf dem Schlauch und befürchte, dass ich es unnötig kompliziert mache.

Es besteht ein leerer Div-Container (#inhalt) und ein Button (#neu_li), welcher in diesen Container li-Elemente setzt:

Code:
$("#neu_li").click(function(event) {
    var neu = "<li contenteditable></li>";
    $("#inhalt").append(neu);
    $("li").last().focus();


    $("li").keypress(function (e) {
        var k = e.keyCode || e.which;
        if (k == 13) {
            if(!$(this).next("li").length){
                $("#inhalt").append(neu);
                $("li").last().focus();
                return false;    
              }
            $(this).next("li").focus();
            return false;
        }
    });    
});

1) Bei Klick auf einen Button (#neu_li) wird ein neues li-Element in den div-container (#inhalt) angehängt und dieses fokusiert. Jetzt kann man durch mehrfaches Klicken auch mehrere Elemente anhängen. Das funktioniert soweit.
2) Befindet man sich nun in einem li-Element und drückt die Enter-Taste, so soll der Cursor in das nächste Element springen. Das funktioniert auch so weit.
3) Ist man beim letzten Element angekommen, so soll schlicht ein weiteres Element angehangen werden und dieses fokusiert werden. Das bekomme ich nicht hin.

Letztlich sollte man also mit der Enter-Taste die Liste beliebig verlängern können...

Edit: Ok, mein Problem liegt darin, dass für die per Script neu angehängten Elemente das JavaScript wohl nicht gilt. Deshalb muss ich die Keypress-Funktion IN die Funktion packen, die ein neues Element erstellt. Dafür muss aber wiederum das Event für die Enter-Taste definiert werden und so gelange ich in eine Endlosschleife.
Irgendwas mache ich da grundlegend falsch.
 
Zuletzt bearbeitet:
Ein Eventhandler funktioniert nicht bei HTML-Elementen, die nach dem Aufbau des DOM erzeugt wurden. Versuche es mal mit dem Eventlistener on().

Code:
$(document).on('click', 'li', function() {
    ...
})
 
Hmm... Aber kann ich denn mit on() überhaupt Tasteneingaben überprüfen? Es wird ja nichts geklickt... (zumindest nachdem die Elemente erstellt wurden)
 
Zurück
Oben