2

ユーザーが既にフォーカスを持っている検索ボックスをクリックすると、自動提案パネルが表示される検索ボックスを作成しようとしています。$("#search_box").is(":focus") を確認し、次のコードを使用してみましたが、どちらも同じ問題がありました。

var fade_in=function() {
    $("#search_panel").fadeIn(100);
};

$(document).ready(function() {
    $("#search_panel").fadeOut(100);

    $("#search_box").focus(function() {
        $(this).on("click", fade_in);
    });

    $("#search_box").blur(function() {
        $(this).off("click", fade_in);

        $("#search_panel").fadeOut(100);
    });
});

イベントの順序により、最初のクリックで常に検索パネルが表示されるようになっているようです-順序は次のとおりです。

  • ユーザーが検索ボックスをクリックする
  • それが焦点になる
  • クリックハンドラが追加されました
  • その後、クリックイベントが発生し、パネルが表示されます

一方、私はそれが次のようになることを望んでいました:

  • ユーザーが検索ボックスをクリックする
  • クリックイベントが発生します
  • ボックスがフォーカスされるので、クリック ハンドラーが追加されます。
  • クリック イベントが発生したときにハンドラーが追加されていないため、まだ何も起こりません。

2 回目のクリックで、入力ボックスが既にフォーカスされているため、パネルが表示されます。

現在のコードは次のとおりです: http://jsfiddle.net/DtfYq/

4

1 に答える 1

2

私があなたを正しく理解していれば、次のコードはあなたが求めていることを行うはずだと思います:

var toggle=function() {
    $("#search_panel").fadeIn(100);
};

$(document).ready(function() {
    $("#search_panel").fadeOut(100);

    $("#search_box").on("click", function() {
        if ($(this).is(':focus')) {
            $(this).on("click", toggle);
        } else {
            $(this).focus();
        }
    });

    $("#search_box").blur(function() {
        $(this).off("click", toggle);

        $("#search_panel").fadeOut(100);
    });
});

改訂された JSFiddle:

検索ボックスをクリックすると、その要素にフォーカスがあるかどうかを確認するように修正しました。存在する場合は、clickイベントを添付します。それ以外の場合は、それだけに集中します。

于 2013-08-31T17:28:49.963 に答える