Нажмите событие не стрелять - JQuery

Question

Вот мой HTML:

<form id="userInfoForm" action="/service/company/user/edit.do?id=2849" method="post"> 
    <h3 class="colored">User details</h3> 
    <table class="settings-edit-table"> 
     <tbody> 
     <tr> 
      <th scope="row"> Position</th> 
      <td> 
       <div class="editable-select-holder"> 
        <input type="text" name="position" id="position" class="js-focus-expander" value="Chief Exeϲutive Officer"> 
        <button type="button" class="editable-select-expander"></button> 
        <ul class="editable-select-options"> 
        <li>Administrator-assistant</li> 
        <li>Chief Accountant</li> 
        <li>Chief Exeϲutive Officer</li> 
        </ul> 
       </div> 
      </td> 
     </tr> 
     <tr> 
      <th scope="row">Language </th> 
      <td> 
       <div class="editable-select-holder"> 
        <input type="text" name="language" id="language" class="js-focus-expander" readonly="" value="English "> 
        <button type="button" class="editable-select-expander"></button> 
        <ul class="editable-select-options"> 
        <li id="en">English </li> 
        <li id="et">Estonian </li> 
        </ul> 
        <input type="text" name="preferredLanguage" id="preferredLanguage" value="en" hidden=""> 
       </div> 
      </td> 
     </tr> 
     </tbody> 
    </table> 
</form> 

Вот мой Jquery:

(function ($) { 

    var settings = function() { 
     this._init(); 
    }; 

    settings.prototype = { 
     _init: function() { 

      $(document).on('focus','.js-focus-expander',function(e){ 
       settings.prototype.expandSelection($(this)); 
      }); 
      $(document).on('focusout','.js-focus-expander', function(){ 
       $('.editable-select-holder').removeClass('editable-select-expanded'); 
      }); 

      $(document).on('click', function(event) { 
       if($(event.target).is('.editable-select-expander')) 
        settings.prototype.expandSelection($(event.target)); 
       if (!$(event.target).closest('.editable-select-holder').length) 
        $('.editable-select-expanded').removeClass('editable-select-expanded'); 

      }); 
     }, 
     expandSelection: function(element){ 
      var $holder = element.parent(); 
      $holder.toggleClass('editable-select-expanded'); 
      $holder.on('click', 'li', function() { 
       console.log("here"); 
       var $t = $(this); 
       var $id = $t.attr('id'); 
       $holder.removeClass('editable-select-expanded'); 
       if(typeof $id != typeof undefined && $id !== false){ 
        $holder.find('input').attr('value',$id).trigger('change'); 
       }else{ 
        $holder.find('input').attr('value',$t.text()); 
       } 

      }); 
     } 
    }; 
})(jQuery); 

Проблема заключается в том, что когда я расширяющийся выбор либо от события щелчка или фокус событие Я не могу выбрать элемент из списка. Я думаю, что фокусное событие - проблема, но я не могу понять, почему. Пожалуйста, взгляните на мой код, может быть, я что-то упустил? Или есть ли другой способ реализовать событие фокуса? Если у вас есть какие-либо вопросы, я с удовольствием отвечу.

Answer 1

Это потому, что событие click и focusout находится внутри анонимной функции.

EDIT:
Вы могли бы попытаться положить это в верхней части вашего скрипта:

$(document).on("ready", function() { 
    $(document).on('focus','.js-focus-expander',function(e){ 
    settings.prototype.expandSelection($(this)); 
    }); 
    //Other functions 
}) 

Answer 2

Я думаю, я нашел решение. Событие Click никогда не вызывалось, потому что li был скрыт событием фокуса, прежде чем он мог быть запущен. Поэтому я установил таймаут, чтобы разрешить зарегистрировать клик:

$(document).on('focusout','.js-focus-expander', function(){ 
       setTimeout(function(){ $('.editable-select-holder').removeClass('editable-select-expanded')},100); 
      });