starts with a ul list visibility:hidden , use jquery to bind the click event to the li, click a button to display it, and then click li to trigger the bound click event.
then remove the initial visibility:hidden , and the bound event is fine.
is there any solution, or is there something wrong with my writing?
<div class="div-search-helper">
<input class="scene-search-input js-search-select1" type="text" style="margin-left:10px;" placeholder="," />
<ul class="ul-helper-search js-ul-helper">
<li>11</li>
<li>1</li>
<li>2</li>
<li>2</li>
<li></li>
<li>0</li>
<li>0</li>
<li>0</li>
</ul>
</div>
$(".js-search-select1").focusin(function(){
$(".js-ul-helper").css("visibility","visible")
$(".js-ul-helper").on("click","li",function(){
console.log("asdasdasd")
$(".js-search-select1").val($(this).text())
})
})
$(".div-search-helper").on("click","li",function(){
console.log($(this).text())
$(".js-search-select1").val($(this).text())
})
$(".js-search-select1").focusout(function(){
$(".js-ul-helper").css("visibility","hidden")
})
.div-search-helper {
display: inline-block;
position: relative;
}
.ul-helper-search {
position: absolute;
left: 10px;
width: 270px;
border: 1px solid -sharpeeeeee;
border-top: none;
background: -sharpFFF;
height: 200px;
overflow-y: auto;
z-index: 1;
visibility: hidden;
}
.ul-helper-search::-webkit-scrollbar {display:none}
.ul-helper-search li {
padding: 2px 5px;
}
.ul-helper-search li:hover {
cursor: pointer;
background: rgba(220, 220, 220,0.5);
}
.ul-helper-search li+li {
border-top: 1px solid rgba(220, 220, 220,0.5);
}