JQuery.on ("keydown") funktioniert nicht, wenn an Seite

Question

Ich habe ein Seitenmenü, von dem Sie mit der rechten Maustaste klicken und umbenennen können. Dies entfernte die <a href="... aus der <li></li> und fügt ein Eingabefeld hinzu. Ich kann nicht scheinen, dass dieser angefügte Input irgendetwas tut, aber es scheint, dass ich es schaffen kann, an Eingängen zu arbeiten, die nicht angefügt wurden.

$('.ShowInput').click(function(e) { 
 
    $('body').html("<input type='text' value='search' class='search'>"); 
 
}); 
 
$("input").on("keydown",function search(e) { 
 
    if(e.keyCode == 13) { 
 
     alert($(this).val()); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="ShowInput"> 
 
    Click to show input 
 
</div>

Answer 1

Versuchen Sie Ihr keydown Ereignis zu einem Vorgängerelement zu binden, und Ihre Eingabe mit der Suchklasse als Argument an die .on()-Methode übergeben.

$("body").on("keydown", "input.search", function (e) { 
    var inputValue = $(this).val(); 
    if(e.keyCode == 13) { 
    alert(inputValue); 
    } 
}); 

Answer 2

Verwenden folgende Weise Ereignisse dynamisch hinzugefügte Elemente zu binden. Referenz: Event binding on dynamically created elements?

$('document').on('keydown', '.search', function() { 
    if(e.keyCode == 13) { 
     alert($(this).val()); 
    } 
});