jquery中給一開始visibility:hidden的元素綁定click事件不生效？

一開始有一個ul列表visibility:hidden，使用jquery為其中的li綁定click事件，點擊一個按鈕它顯示，然后點擊li沒觸發(fā)綁定的click事件。

然后去掉一開始 visibility:hidden，綁定的事件就可以了。

請問有沒有什么解決辦法，還是我的寫法有問題？

<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 #eeeeee;
    border-top: none;
    background: #FFF;
    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);
}