javascript - OnClick 以及监听器不工作

Question

我想通过 onclick 事件或监听器执行函数 getUser()。我已经尝试了这两种方法，但是，它们都不起作用。

您可以在下面找到我的代码。我怎样才能让它发挥作用？

我已经尝试使用按钮和输入而不是 div，效果不佳。如果您使用按钮或输入而不是 div，甚至连听众也不行。

$(document).on('focus', '#search_input', function() {
  $("#autocomplete-list").show();
});

$(document).on('blur', '#search_input', function() {
  $("#autocomplete-list").hide();
});


$(document).on('click', '.search-items', function() {
  console.log(this);
});

function getUser(id){
  console.log(id + "triggered");
}

/* Autocomplete Stlying */

.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 15px;
  right: 15px;
}

.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #d4d4d4;
  text-align: left;
}

.autocomplete-items div:hover {
  /*when hovering an item:*/
  background-color: #e9e9e9;
}

.autocomplete-active {
  /*when navigating through the items using the arrow keys:*/
  background-color: DodgerBlue !important;
  color: #ffffff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="col-md-4">
  <div id="search_input_wrapper" class="autocomplete form-group" style="margin: 0px">
    <input id="search_input" type="text" name="search_input" class="form-control" placeholder="Kunde" style="margin-top: 25px;">
    <div id="autocomplete-list" class="autocomplete-items" style="display: none;">
      <div class="search-items" onclick="getUser(2)">2: Max, Mustermann</div>
      <div class="search-items" onclick="getUser(3)">3: Tom, Maier</div>
    </div>
  </div>
</div>

如有任何帮助，我将不胜感激。

Answer 1

您需要使用 stopPropagation()输入和列表元素如下:

$(document).on('focus', '#search_input', function() {
  $("#autocomplete-list").show();
});

$(document).on('click', function() {
  $("#autocomplete-list").hide();
});

$("#autocomplete-list, #search_input_wrapper").on('click', function() {
  event.stopPropagation();
});


function getUser(id) {
  console.log(id + "triggered");
}

/* Autocomplete Stlying */

.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 15px;
  right: 15px;
}

.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #d4d4d4;
  text-align: left;
}

.autocomplete-items div:hover {
  /*when hovering an item:*/
  background-color: #e9e9e9;
}

.autocomplete-active {
  /*when navigating through the items using the arrow keys:*/
  background-color: DodgerBlue !important;
  color: #ffffff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="col-md-4">
  <div id="search_input_wrapper" class="autocomplete form-group" style="margin: 0px">
    <input id="search_input" type="text" name="search_input" class="form-control" placeholder="Kunde" style="margin-top: 25px;">
    <div id="autocomplete-list" class="autocomplete-items" style="display: none;">
      <div class="search-items" onclick="getUser(2)">2: Max, Mustermann</div>
      <div class="search-items" onclick="getUser(3)">3: Tom, Maier</div>
    </div>
  </div>
</div>