1

この質問は、同じオブジェクトにバインドされた複数のイベントを実験しているときに思い浮かびました。それでも私は最も簡単な解決策を見つけようとしています。

このマークアップがあると想像してください。

​<select class="class1 class2">
    <option>Value 1</option>
    <option>Value 2</option>
    <option>Value 3</option>
</select>
​&lt;p></p>​​​​​​​​​​​​​​​​​​​​​

selectそして、イベントにバインドされた2つのメソッドchange：

$(".class1").on("change", function() {
    // first method for change
    $("p").append("<div>Event for class1</div>");
});

$(".class2").on("change", function() {
    // second method for change
    $("p").append("<div>Event for class2</div>");
});

ここで、選択を変更すると、内容は次のpようになります。

Event for class1
Event for class2

私の「研究」の質問は、最初にハンドラーを起動させるために2番目 のハンドラーを書き直す方法です。したがって、最終的にの内容は次のようになります。onp

Event for class2
Event for class1

onソース内のステートメントを交換できない状況です。

どんなアイデアがありますか？

4

2 に答える 2

1

これには解決策があります。一例はpreBindジョナサン・コンウェイによるものです。

このプラグインは、要素の jQuery のイベント ハンドラー リストを操作し、末尾ではなく先頭にイベントを追加します。

したがって、以前に使用した$(...).preBind場所を使用bindします。これは当てはまりません$(...).onが、同様の解決策はこれから簡単に作成できます。

ただし、1 位を争うイベントはしばしば悪いアーキテクチャの兆候であるため、これは行わないよう強くお勧めします。

于 2012-05-02T22:48:04.180 に答える
1

まず、調査の目的ではないかもしれませんが、イベントをハンドラーにバインドするために 2 つのクラスは必要ありません。$(".class1").on(...);2回電話するだけです。

次に、ハンドラーの実行順序は重要ではありませんが、これは純粋なテスト/研究であることを理解しています。

あなたの質問について、2つの選択肢が思い浮かびます...

1.- 可能であれば、イベントをアンバインド/バインドします。コードは次のようになります。

$(".class1").on("change", function() {
    // first method for change
    $("p").append("<div>Event for class1</div>");
});

// Unbind event, then bind again
$(".class1").off("change").on("change", function() {
    // second method for change
    $("p").append("<div>Event for class2</div>");
    $("p").append("<div>Event for class1</div>");
});

2.- 問題のHow to order events bound with jQueryのように、独自のイベントを作成します。

$(".class1").on("change", function() {
    // first method for change
    $("p").append("<div>Event for class1</div>");
});

// Bind custom event
$(".class1").on("myCustomEvent", function() {
    // first method for change
    $("p").append("<div>Event for class1</div>");
});

$(".class2").off("change").on("change", function() {
    // second method for change
    $("p").append("<div>Event for class2</div>");

    // Trigger custom event
    $(".class1").trigger("myCustomEvent");
});
于 2012-05-02T22:45:46.723 に答える