現在の後に以前にバインドされたイベントを呼び出す方法は？

Question

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

私たちは、このマークアップを持っている想像：

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

そしてchangeイベントのselectと結合した二つの方法：あなたが選択はpの内容を変更させる場合

$(".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>"); 
}); 

は、今のようになります

Event for class1 
Event for class2 

私の「研究」の質問は、の第2のonハンドラを起動させるために、ハンドラを起動させる方法を書き換える方法です。最初にです。だから、最終的にはpの内容は次のようになります。私たちは、ソースにon文を交換することができないように

Event for class2 
Event for class1 

状況があります。

どのようなアイデアがありますか？

Answer 1

このためのソリューションがありますが、コードは次のようになります。 1つの例はpreBind by Jonathan Conwayです。

このプラグインは、要素のjQueryのイベントハンドラリストを操作し、最後に代わりにイベントの前にイベントを追加します。

したがって、bindを先に使用した$(...).preBindを使用します。これは$(...).onには当てはまりませんが、これと同様の解決策を簡単に作成できます。は、最初に競合するイベントが悪いアーキテクチャのサインであるため、は絶対にあなたにはお勧めしません。

Answer 2

まず、研究の目的ではないかもしれませんが、イベントをハンドラにバインドするために2つのクラスは必要ありません。 $(".class1").on(...);を2回呼び出すことができます。

第2に、ハンドラの実行順序は重要ではありませんが、私はこれが純粋なテスト/リサーチであることを理解しています。あなたの質問について

、2つのオプションが

1.-アンバインド/バインドイベント、可能な場合は...気にしています。質問How to order events bound with jQueryと同様に

$(".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.-、独自のイベントを作成します：

$(".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"); 
});