如何在當前之後調用先前綁定的事件？

Question

這個問題來到我的腦海，當我用綁定到同一個對象的多個事件的實驗。我仍然試圖找到最簡單的解決方案。

想象一下，我們有這個標記：

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

和兩個方法勢必select爲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 

我的「研究」的問題是如何改寫第二on處理，以使其觸發其處理第一。所以最後的p內容應該是：

Event for class2 
Event for class1 

的情況是這樣，我們無法交換源on語句。

你有什麼想法？

Answer 1

有此解決方案。一個例子是preBind by Jonathan Conway。

這個插件操縱一個元素的jQuery的事件處理程序列表，並在它的前面添加一個事件，而不是在最後。

因此，您在前面使用bind時使用了$(...).preBind。這不適用於$(...).on，但可以很容易地從中得到類似的解決方案。

然而，這是我會強烈建議你不要做，因爲事件爭奪第一名往往是壞建築的跡象。

Answer 2

首先，雖然它可能不是你研究的目的，你不需要兩個類的事件綁定到處理器。您可以撥打$(".class1").on(...);兩次。

其次，處理程序的執行順序不應該是很重要的，但我明白，這是純粹的測試/研究。

關於你的問題，有兩個選項浮現在腦海中......

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