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

删除更改事件在输入中。因为第一次单击li。输入的更改功能已读入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();
  });




});

Answer 2

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

问题是您单击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();
  });




});

这里是fiddle。

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

2 个答案: