редактируемые выбрать

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()); 
    }); 
}); 

Я хочу Ег, список при нажатии на кнопку или сосредоточиться на входе. Код, который я привел выше, работает только при нажатии кнопки. Мне нужна такая же логика и для фокусного события. Какие-либо предложения?

изменен как этот, но все еще не работает должным образом.

$(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 
    });