Javascript 必须单击列表项2次才能启动jQuery

我有一个输入，当有人输入时，我希望出现一个列表

然后，当有人点击列表项时，我希望列表消失。但目前的问题是，我需要点击列表项两次，列表才会消失

这是html：

<input class="my-input" type="text">

下面是jQuery：

//when something is typed in the input show a list of items below
$('body').on('keyup change', '.my-input', function() {

  $('#dynamic-search-results').remove();

  var listItems = '<li>Hello</li>';
  listItems += '<li>Awesome</li>';
  listItems += '<li>World</li>';

  $( '<ul id="dynamic-search-results">'+listItems+'</ul>' ).insertAfter( this );

});

//when an item is clicked remove the list
$('body').on( 'mousedown', '#dynamic-search-results li', function() {
   console.log($(this).text());
   $('#dynamic-search-results').remove();
});

为什么这不起作用？非常感谢你的帮助。 删除更改事件 在输入中。因为第一次单击li。输入的更改功能已在ul中读取

---

从侦听器中删除更改侦听器

问题是当您单击li时添加ul，因此它将在dom中添加新的ul和li，因此您需要单击两次才能从dom中删除ul

jQuery(document).ready(function ($) {

    //when something is typed in the input show a list of items below
  $('body').on('keyup', '.my-input', function() {

      $('#dynamic-search-results').remove();

      var listItems = '<li>Hello</li>';
       listItems += '<li>Awesome</li>';
       listItems += '<li>World</li>';

        $( '<ul id="dynamic-search-results">'+listItems+'</ul>' ).insertAfter( this );

  });

  //when an item is clicked remove the list
  $('body').on( 'mousedown', '#dynamic-search-results li', function() {
    console.log($(this).text());
    $('#dynamic-search-results').remove();
  });




});

---

这里也是一样。

使用单击而不是鼠标向下移动，这不起作用。这是我以前尝试过的。实际上，您在组keyup change remove change中绑定了2个事件

jQuery(document).ready(function ($) {

    //when something is typed in the input show a list of items below
  $('body').on('keyup', '.my-input', function() {

      $('#dynamic-search-results').remove();

      var listItems = '<li>Hello</li>';
       listItems += '<li>Awesome</li>';
       listItems += '<li>World</li>';

        $( '<ul id="dynamic-search-results">'+listItems+'</ul>' ).insertAfter( this );

  });

  //when an item is clicked remove the list
  $('body').on( 'mousedown', '#dynamic-search-results li', function() {
    console.log($(this).text());
    $('#dynamic-search-results').remove();
  });




});