jQuery 选择的插件 - 激活（即焦点）不起作用？

Question

我正在 Bootstrap 模式中实例化 Chosen 插件。我在启动模式后调用 Chosen 插件。

除了能够自动聚焦元素以允许在不首先单击元素的情况下进行键入之外，所有功能均按预期工作。奇怪的是，我在该元素周围出现了一个蓝色边框，这表明它具有焦点，但在我单击该对象之前实际上没有注册任何按键。

我只需要它为 Chrome 工作，我目前运行版本 39.0.2171.95。

我正在按照文档中的说明进行操作：

http://harvesthq.github.io/chosen/options.html#triggerable-events

代码如下：

var $modal = $('#' + modalId); // This element contains relevant modal markup along with <select> element
$modal.modal();

var $mySelect = $('#mySelectElement'); // id of the <select> element
$mySelect.chosen();
$mySelect.trigger('chosen:activate');  // This doesn't work...

也尝试了以下但无济于事：

$mySelect.trigger('chosen:open');      // This doesn't work...

感谢任何指点。

干杯，李

Answer 1

您的代码必须有效。这是一个基于官方文档的简单示例。我不知道你是否在你的代码中做了更多的事情，但你的代码不起作用。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Chosen: A jQuery Plugin by Harvest to Tame Unwieldy Select Boxes</title>
  <link rel="stylesheet" href="docsupport/style.css">
  <link rel="stylesheet" href="docsupport/prism.css">
  <link rel="stylesheet" href="chosen.css">
  <style type="text/css" media="all">
    /* fix rtl for demo */
    .chosen-rtl .chosen-drop { left: -9000px; }
  </style>
</head>
<body>
  <form>
    <div id="container">
      <div id="content">
        <header>
          <h1>Chosen <small>(<span id="latest-version">v1.3.0</span>)</small></h1>
        </header>

          <em>Into This</em>
          <select data-placeholder="Choose a Country..." class="chosen-select" style="width:350px;" tabindex="2">
            <option value=""></option>
            <option value="United States">United States</option>
            <option value="United Kingdom">United Kingdom</option>
            <option value="Afghanistan">Afghanistan</option>
            <option value="Aland Islands">Aland Islands</option>
            <option value="Albania">Albania</option>
            <option value="Algeria">Algeria</option>         

          </select>
        </div>
      </div>

    </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
  <script src="chosen.jquery.js" type="text/javascript"></script>
  <script type="text/javascript">
   var $mySelect = $('.chosen-select');
   $mySelect.chosen();
   $mySelect.trigger('chosen:open');
  </script>
</body>

</html>

Answer 2

我找到了答案，或者至少找到了解决方法。

当单步执行代码时，我注意到 trigger('chosen:activate') 方法在 $modal.modal() 完成之前被调用，即模式尚未显示。

我只是在调用 chosen:activate 之前添加了一个异步延迟，这似乎修复了它，并且可以立即输入选择的元素：

// Enable chosen plugin...
var $mySelect= $('#mySelect');
$mySelect.chosen();
var enableChosen = setTimeout(function() {
    $mySelect.trigger('chosen:activate');
}, 250);

任何低于 250 毫秒的时间都会再次停止工作。我想这与必须等待模态淡入淡出动画完成有关。

** 更新**

另一种更好的方法，挂接到 Bootstrap 模态的 shown.bs.modal 回调，如下所示：

$modal.on('shown.bs.modal', function(e) {
// Enable chosen plugin...
    var $mySelect = $('#mySelect');
    $mySelect.chosen();
    $mySelect.trigger('chosen:activate');
});

jQuery 选择的插件 - 激活（即焦点）不起作用？

jQuery Chosen plugin - activate (i.e. focus) not working?

javascript

jquery

twitter-bootstrap

jquery-chosen