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選擇插件 - 激活（即焦點）不工作？

回答

相關問題