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

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

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

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

// 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');
});

Answer 2

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

<!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>

jQuery Chosen插件 - 激活（即焦点）不工作？

2 个答案: