3

私はselect2プラグインをしばらく使用してきましたが、今まで完璧でした。

データをロードして正常に動作している 3 つの選択と、ポップアップ内にある複数の選択を含むページがあります。見栄えは良いのですが、検索フィールドに書き込むことができません。メインページでは検索がうまく機能しているので、何が問題なのかわかりません..

私はポップアップ用のblockUIプラグインを使用しています。z-index、destroy、および blockUI 関数のコールバックでプラグインを開始しようとしましたが、何も機能せず、理由がわかりません。

コード:

<!doctype html>
<html>
<head>
<title>ff</title>
<link type="text/css" rel="stylesheet" href="http://cdn.jsdelivr.net/select2/3.2/select2.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/select2/3.2/select2.js">    </script>
<script type="text/javascript" src="http://xiao3meng.googlecode.com/files/jquery.blockUI.js"></script>
<script>
    $(document).ready(function() {
        $(".startselect").select2();

        $('#clickstartpopup').click(function() { 
            $.blockUI({ 
                message: $('#popblock'),
                onBlock: function() { 
                    $(".popupselect").select2();

                }
            });
        });

    });
</script>
</head>
<body>
<div id="maincontent1" class="maincontent mywebsitepage">
  <select  class="startselect" id="merchantList">
 <option value="volvo">Volvo</option>
 <option value="saab">Saab</option>
 <option value="mercedes">Mercedes</option>
 <option value="audi">Audi</option>
</select>
</div>
<div style="clear: both; height: 15px;"></div>
<span id="clickstartpopup" style="cursor: pointer;color:red;" >click me!</span>
<div style="height: 300px;background-color: red;display:none;" id="popblock" >
<select class="popupselect">
 <option value="volvo">Volvo</option>
 <option value="saab">Saab</option>
 <option value="mercedes">Mercedes</option>
 <option value="audi">Audi</option>
</select>
</div>
</body>
</html>


なにか提案を?

4

1 に答える 1

1

ここでも同じ問題。jquery.fullCalendar に含まれるイベントがクリックされたときに開くツールチップ (qtip2) に select2 をロードします。fullCalendar 自体は div に表示され、アプリケーションをオーバーレイする blockUI メッセージとして使用されます。

ネイティブでは、select の検索フィールドが正しく機能しません。jquery blockUI バージョン 2.57.0 (17.02.2013) では、select2 の検索フィールドを、バックグラウンド アプリケーションで要素をブロックし、すぐにブロック解除することで期待どおりに機能させることができます。

$("#someDivInTheBg").block();
$("#someDivInTheBg").unblock();

興味深いことに、この回避策は jquery BlockUI バージョン 2.64.0 (18.07.13) では機能しなくなりました。何が起こっているのかわかりません。明らかに blockUI/select2 の相互作用にあることを除いて、問題を追跡する方法を見つけることができました。

彼が表示された直後にselect2検索フィールドを使用しようとすると、入力した最初の文字がロックされる前に検索フィールドに表示されることがあります。qtip を開いたときに blockUI の読み込みがないため、この問題は select2 コードによって引き起こされる可能性があります。

バックグラウンド アプリケーション (blockUI メッセージ内ではない) にある別の select2 では問題が発生しないことにも注意してください。

blockUI と select2 githubs で問題を報告してみます

* 編集: 解決策 * まあ、問題は実際には単純です。

Select2 は 2 つの部分に分かれています: - select2-container は元の select のすぐ隣に配置されます (動的にロードされたデータを操作する場合は非表示の入力) - select2-drop はタグの直前に配置されます (この要素は一意であり、それぞれに使用されることに注意してください)開いたときにselect2の1つ)入力フィールド.select2-input、select2-dropの子。

BlockUI は、デフォルトで、その作成者である malsup がドキュメントで述べているように、メッセージにない要素のキーおよびマウス イベントを無効にします。

// ブロックされているコンテンツのキー イベントとマウス イベントを無効にする場合は有効にします bindEvents: true,

したがって、blockUI メッセージ内にあるフィールドで select2 を初期化すると、blockUI メッセージ内ではなくドキュメントの末尾近くにある input.select2-input フィールドでキー イベントとマウス イベントが無効になることを除いて、すべて問題ありません。 html...

解決策は次のように簡単です: オプションで blockUI を初期化します:

bindEvents: false,

マウスとキーのイベントが中和されないため、blockUI 要素の外でフォーカスを保持または取得できる要素に注意してください。

おそらく、blockUI 内の select2 アーキテクチャに固有の少しの改善により、よりクリーンになります。

于 2013-08-23T14:27:48.787 に答える