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

我在Bootstrap模式中实例化了Chosen插件。我在启动模式之后调用Chosen插件。jQuery选择插件 - 激活（即焦点）不工作？

除了能够自动将元素自动对焦以允许在没有首先点击元素的情况下进行打字之外，所有的预期工作都是如此。奇怪的是，我得到了一个蓝色的边框，表明它有焦点，但没有按键实际上注册，直到我点击进入对象。

我只需要这个为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...

任何指针赞赏。

干杯，李

来源

2015-01-13 lee_mcmullen

我发现了一个答案，或至少是一个解决方法。

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

我只是增加了一个异步延迟主叫chosen:activate这似乎解决它之前和所选择的元件可被立即输入到：

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

任何大于250ms的下部，并停止工作了。我想这是需要等待模式淡出动画才能完成的。

**更新**

替代和更好的方法，勾入shown.bs.modal回调的引导模式，就像这样：

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

来源

2015-01-13 15:39:30

这是一个很好的解决方案，但研究模态在淡入淡出动画完成后是否有触发事件或回调。 –

谢谢Eduardo，已经按照你的建议去做了。答案已更新。 –

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

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

来源

2015-01-13 14:53:32

感谢爱德华多。恐怕它不工作。 –

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

回答

相关问题