編輯選擇

Question

這裏是我的HTML代碼：

<div class="editable-select-holder"> 
    <input type="text" name="position" id="position" value="${userInfoForm.position}"> 
    <button type="button" class="editable-select-expander"></button> 
    <ul class="editable-select-options"> 
     <c:forEach var="position" items="${positions}"> 
      <li>${position.description}</li> 
     </c:forEach> 
    </ul> 
</div> 

，這是jQuery的：

$(document).on('click', '.editable-select-expander', function() { 
    var $holder = $(this).parent(); 
    $holder.toggleClass('editable-select-expanded'); 
    $holder.on('click', 'li', function() { 
     var $t = $(this); 
     $holder.removeClass('editable-select-expanded'); 
     $holder.find('input').val($t.text()); 
    }); 
}); 

我想exand列表當我點擊按鈕或重點投入。我上面提供的代碼只適用於按鈕點擊。在焦點事件上我也需要相同的邏輯。有什麼建議麼？

像這樣改變，但仍然無法正常工作。

$(document).on("click",'.editable-select-holder', function() { 
       var $holder = $(this); 
       $holder.on('click','.editable-select-expander', function() { 
        $holder.toggleClass('editable-select-expanded'); 
       }); 

       $holder.on('click', 'li', function() { 
        var $t = $(this); 

        $holder.removeClass('editable-select-expanded'); 

        $holder.find('input').val($t.text()); 
       }); 

       $holder.on('focus', 'input', function() { 
        $holder.addClass('editable-select-expanded'); 
       }); 
      }); 

Answer 1

我希望你可以使用此代碼

$(your input box id or class).focusin(function() { 
    //your logic here 
    });