JQuery.on(“keydown”）追加到页面时不工作

JQuery .on("keydown") Not Working When Appended To Page

本文关键字：工作 追加 on keydown JQuery      更新时间：2023-09-26

我有一个侧菜单，您可以右键单击并选择重命名。这从<li></li>中删除了<a href="...，并添加了一个输入字段。我似乎无法让这个附加的输入做任何事情，但似乎我可以让它处理尚未附加的输入。

$('.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>

尝试将keydown事件绑定到祖先元素，并将带有搜索类的输入作为参数传递给.on()方法。

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

使用以下方式为动态添加的元素绑定事件。参考：动态创建的元素上的事件绑定？

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