javascript - 必须单击列表项 2 次才能触发 jQuery

Question

我有一个输入，当有人输入输入时，我希望显示一个列表。

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

这是 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();
});

为什么这不起作用？非常感谢您提前提供的帮助。 https://jsfiddle.net/uwkr2yas/1/

Answer 1

删除更改事件 在input中。因为第一次点击li，input的变化函数被读取到了ul

https://jsfiddle.net/prasanth1036/ausj3ng7/5/

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();
  });




});