Access keyup Ereignis auf Eingabeelement generiert durch Code

Question

In meinem Projekt, ich erzeuge div-Elemente, die Eingabefelder mit den Anfrage Antwortdaten aus meiner Datenbank mit den Suchparametern enthalten. Ich muss in der Lage sein, ein keyup -Ereignis für zusätzliche Arbeit zu verwenden, aber der Klassenselektor funktioniert nicht, wenn die Eingabe mithilfe von append generiert wurde, obwohl die Klasse bei der Überprüfung vorhanden ist.

habe ich eine CodePen, die es zeigt: http://codepen.io/leofontes/pen/PNgabB?editors=1111

HTML

<div class="container" id="container"> 
    <button id="button">Click</button><br> 
</div> 

CSS

.container { 
    background-color: #F00; 
    height: 200px; 
    width: 200px; 
} 

.dynamic-input { 
    margin: 5px; 
} 

Javascript/jQuery

$(document).ready(function() { 
    $('#button').click(function() { 
    for(var i = 0; i < 5; i++) { 
     $('#container').append('<input type="text" class="dynamic-input">') 
    } 
    }); 


    $('.dynamic-input').keyup(function() { 
    console.log($(this).val()); 
    }); 
}); 

Die jQuery Code funktioniert gut, ich habe es mit Eingaben innerhalb der $ (Dokument) .ready Funktion getestet und es hat getan, was ich beabsichtigte, ich verstehe nicht, warum es nicht, wenn es später generiert wird.

Ich habe auch versucht, eine versteckte Eingabe mit der Klasse bereits mit dem HTML geladen, aber das funktioniert auch nicht.

Alle Ideen oder Vorschläge geschätzt, danke

Answer 1

Sie benötigen event delegation für dynamisch generierte Element.

$('#container').on('keyup', '.dynamic-input', function() { 
    console.log($(this).val()); 
}); 

Answer 2

try this:

$(document).ready(function() { 
    $('#button').click(function() { 
    for(var i = 0; i < 5; i++) { 
     $('#container').append('<input type="text" class="dynamic-input">') 
    } 
    }); 


    $(document).on('keyup', '.dynamic-input', function() { 
    console.log($(this).val()); 
    }); 
}); 

Answer 3

Das liegt daran, dass Sie die JQuery-Bindung ausgeführt haben, BEVOR das Element erstellt wird. Wenn $('.dynamic-input').keyup ausgeführt wird. Ihre Eingaben, die NACH dem Klicken auf die Schaltfläche erstellt werden, existieren noch nicht.

Answer 4

Das Problem besteht darin, dass Sie die Schaltfläche unabhängig vom Erstellen der Bindung erstellen. Was Sie tun sollten, ist die Eingabe und Bindung des Click-Ereignisses als Teil des Callbacks. Im Moment binden Sie das Element korrekt, syntaktisch, aber es existiert noch nicht. Also, was Sie möchten, ist.

$(document).ready(function() { 
    $('#button').click(function() { 
    for(var i = 0; i < 5; i++) { 
     $('#container').append('<input type="text" class="dynamic-input">') 
    } 
    //You're still within the scope of the callback, so this is the appropriate location 
    $('.dynamic-input').on('keyup, function() { 
     console.log($(this).val()); 
    }); 

    });