【问题标题】：JavaScript click event on input autosuggest item输入自动建议项上的 JavaScript 单击事件
【发布时间】：2017-12-27 19:27:26
【问题描述】：

我无法在项目列表上绑定点击事件，框一直消失。知道为什么单击 item-list > div 我无法在 div 上绑定单击事件我需要获取文本并附加到输入占位符中？

(function() {
  $(".input-msg").focus(function() {
    $(".item-list").css('display', 'block');
    $(".item-list div").click(function() {
      var inputValue = $('.input-msg');
      var data = $(this).text();
      inputValue.val(data);
    });
  }).blur(function() {
    $(".item-list").css('display', 'none');
  });
})();

.input-wrapper {
  width: 300px;
}

.item-list {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Please add your HTML so we can run it -->
<div class="input-wrapper">
  <input type="text" class="input-msg" placeholder="click me">
  <!-- input msg -->
  <div class="item-list">
    <div>This is item one</div>
    <div>This is item one</div>
    <div>This is item one</div>
    <div>This is item one</div>
  </div>
</div>

【问题讨论】：

能否请您也将 html 添加到问题中
我已将您的代码转换为片段。请编辑您的帖子，然后编辑代码段并添加您的 HTML，以便我们更好地提供帮助，并查看代码当前的行为方式。谢谢。
不要直接使用事件方法（.focus()，blur()）。而是使用.on(event)
你刚刚添加了一个库的链接，你能添加你的javascript引用的元素吗？
我已经编辑了 HTML，你能帮我推荐一个替代方案吗，谢谢

标签： javascript jquery arrays functional-programming

【解决方案1】：

这段代码没有绑定点击事件，你调用的是点击事件。

$(".item-list div").click() 
{
  var inputValue = $('.input-msg');
  var data = $(this).text();
  inputValue.val(data);
}

应该是

$(".item-list div").off('click').click( function () { 
  var inputValue = $('.input-msg');
  var data = $(this).text();
  inputValue.val(data);
});

将单击更改为 mousedown 并且它可以工作，因为当您单击时会触发模糊事件并导致列表在单击操作完成之前被隐藏。

(function() {
  $(".input-msg").focus(function() {
    $(".item-list").css('display', 'block');
    $(".item-list div")
      .off('mousedown')
      .on('mousedown', function () { 
        var inputValue = $('.input-msg');
        var data = $(this).text();
        inputValue.val(data);
      });
  }).blur(function() {
    $(".item-list").css('display', 'none');
  });
})();

.input-wrapper {
  width: 300px;
}

.item-list {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Please add your HTML so we can run it -->
<div class="input-wrapper">
  <input type="text" class="input-msg" placeholder="click me">
  <!-- input msg -->
  <div class="item-list">
    <div>This is item one</div>
    <div>This is item two</div>
    <div>This is item three</div>
    <div>This is item four</div>
  </div>
</div>

【讨论】：

@espacarello，它似乎对任何其他建议都不起作用

【解决方案2】：

我认为您的.click() 语法有误，应该是格式

.click(function(){
    //your code here
})

我已经更新了你的代码

(function() {
  $(".input-msg").focus(function() {
    $(".item-list").css('display', 'block');
    $(".item-list div").click(function(){ 
      var inputValue = $('.input-msg');
      var data = $(this).text();
      inputValue.val(data);
    })
  }).blur(function() {
    $(".item-list").css('display', 'none');
  });
})();

【讨论】：