1

当我尝试绑定到同一个对象的多个事件时，我想到了这个问题。我仍然试图找到最简单的解决方案。

想象一下我们有这个标记：

​<select class="class1 class2">
    <option>Value 1</option>
    <option>Value 2</option>
    <option>Value 3</option>
</select>
​&lt;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在源代码中交换语句。

你有什么想法？

4

2 回答 2

1

首先，虽然这可能不是您研究的目标，但您不需要两个类来将事件绑定到处理程序。你可以打$(".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");
});
于 2012-05-02T22:45:46.723 回答
1

有解决方案。一个例子是preBind乔纳森·康威的。

这个插件为一个元素操作 jQuery 的事件处理程序列表，并在它的前面而不是在末尾添加一个事件。

因此$(...).preBind，您使用bind之前使用的位置。这并不适用，$(...).on但可以很容易地从中得出类似的解决方案。

但是，我强烈建议您不要这样做，因为争夺第一名的事件通常是不良架构的标志。

于 2012-05-02T22:48:04.180 回答