-1

この質問は何度も聞かれましたが、「複数」の種類に対する答えは見当たりません。

http://jsfiddle.net/queZ6/107/

ボックスにタブで移動すると、アラートを表示してフォーカスイベントをキャプチャしたいと思います。基本的に、各入力を囲む要素の強調表示を変更したいと思います。これは、フォームに入力するときに続きます。これは基本的に、ユーザーがどのフィールドにいるかを簡単に確認できるようにするためのシグナルです。

ボックスにタブで移動する（または明らかにクリックする）ことで、フォーカスイベントをキャプチャする方法を一生理解できません。

INTOを入力していることを考えると、なぜこれが難しいのかわかりません。JavaScriptを使用して、新しく作成された入力（入力したもの）を確認し、それにバインドしますか？JSは時々私を混乱させます：S

4

2 に答える 2

2

要素は動的に作成されるため、 jqueryを使用してイベント委任を使用する必要がありますon。これにより、要素が存在する前にハンドラーをアタッチできます。

$('.chzn-choices').focus(function(e){

代わりに

$("container").on("focus", '.chzn-choices',function(e){

wherecontainerは、動的にロードされない静的な祖先要素のセレクターです。そのようなコンテナが存在しない場合はdocument使用できますが、可能な場合は避ける必要があります。

于 2012-09-16T02:44:51.460 に答える
-1

アップデート：

古い回答では、動的に作成された要素にバインドできないと述べられていましたが (これはまだある程度当てはまります)、問題のプラグインの更新により、これは問題ではなくなりました。

問題のプラグインには、ハンドラーを複数回トリガーするという問題がまだありますが、アラート メッセージが使用されている場合、更新のおかげで動的に作成された要素にバインドできるようになりました。

これを行うために行う必要があるのは、元のターゲット選択リスト.on()のイベントにを介してバインドすることだけです。chosen:showing_dropdown

ただし、継続的に作成されるアラート ボックスの問題を解決するために、underscore.js の .debounce()メソッドを使用することにしました。これにより、1 秒ごとに 1 回だけ即時にトリガーされます。

アンダースコア ライブラリは決して必要ではありませんが、その小さな癖を回避するために、ある種のデバウンス機能が必要になります。

var debouncedAlert = _.debounce(window.alert, 1000, true);
$('#select').chosen();

$('#select').on('chosen:showing_dropdown', function(e){
    e.preventDefault();
    e.stopPropagation();
    debouncedAlert('focused');
});

作業例:

$(document).ready(function() {
    var debouncedAlert = _.debounce(window.alert, 1000, true);
    $('#select').chosen();

    $('#select').on('chosen:showing_dropdown', function(e){
        e.preventDefault();
        e.stopPropagation();
        debouncedAlert('focused');
    });
    
    $('button').click(function() {
        $('#select').trigger('chosen:open');
    });

});
body {
    margin: 10px;
}

select {
    width: 200px;
}
<link href="https://harvesthq.github.io/chosen/chosen.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://harvesthq.github.io/chosen/chosen.jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<input type="text" value="Put your cursor here then Press Tab. Chosen will be focused!" style="width:100%">
<br>
<select id="select" multiple>
    <option value="1">abc</option>
    <option value="2">def</option>
    <option value="3">ghi</option>
</select>
<br>
<button>Press this button. Now chosen <b>will</b> be focused! :)</button>

古い答え:

いいえ、できません。Jquery の通常のバインド方法は、動的に作成された要素では機能しません。これらのタイプの要素にバインドするには、.on().

$('.chzn-choices').focus(function(e){
    e.preventDefault();
    alert('focused!');
});

次のように変更されます。

$('#select_chzn').on('focus', '.chzn-choices', function(e){
    e.preventDefault();
    alert('focused!');
});

この場合、イベントをコンテナー要素に委譲し、それを特定の要素に向けます。

実施例

于 2012-09-16T02:46:19.610 に答える