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事件位于匿名函数内。

编辑：
您可以尝试将其放在脚本的顶部：

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

Answer 2

我想我找到了解决方案。 Click事件永远不会被调用，因为li在被触发之前被focusout事件隐藏了。所以我设置了一个超时以允许注册点击：

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

点击事件没有触发 - JQuery

2 个答案: