我正在尝试同时运行两个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>
。问题是只触发模糊事件。
我已经尝试更改两个事件的顺序,但这没有帮助。 我会为你提供代码。