当两个事件同时被触发时,如何在另一个JQuery事件之前运行一个JQuery事件

时间:2018-02-27 18:45:30

标签: javascript jquery html event-handling

我正在尝试同时运行两个JQuery事件。如果只有其中一个处于活动状态,则它们都可以正常工作,但如果它们一起处于活动状态,则只会触发一个事件。

当输入失去焦点时,一个事件正在侦听,另一个事件是用于获取实时搜索结果的文本。我的想法是在输入失去焦点后隐藏结果div(用户点击不同的东西)。另一个事件是当用户点击结果div中的某些内容并在之后隐藏它时,获得已经提到的结果。

$(document).on("focusin", 'input.mdb-min-input', function(event) {
  $("div.result").html('<p class="live-results"> Test1 </p><p class="live-results"> Test2 </p>');
});

$(document).on("click", '.live-results', function(event) {
  console.log("click!");
  $(this).parents(".search-box").find('input[type="text"]').val($(this).text());
});

$(document).on("blur", 'input.mdb-min-input', function(event) {
  console.log("blur!!");
  $(this).siblings(".result").empty();
});
<!DOCTYPE html>
<html lang="de">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Jquery Events</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>

<body>

  <div class="search-box">
    <input class="mdb-min-input" type="text" />
    <div class="result z-depth-1">
      <p class="live-results"> Test1 </p>
      <p class="live-results"> Test2 </p>
    </div>
  </div>
  <div class="spacer"> </div>
  <div class="search-box">


</body>

</html>

。问题是只触发模糊事件。

我已经尝试更改两个事件的顺序,但这没有帮助。 我会为你提供代码。

0 个答案:

没有答案