如何在当前之后调用先前绑定的事件？

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