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

首先，虽然它可能不是您研究的目的，但您不需要两个类来将事件绑定到处理程序。您只需拨打$(".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");
});

Answer 2

有解决方案。一个例子是preBind by Jonathan Conway。

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

因此，您使用之前使用$(...).preBind的{{1}}。这不适用于bind，但可以从中轻松地制定类似的解决方案。

然而，我强烈建议你不要这样做，因为争夺第一名的事件通常是糟糕架构的标志。

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

2 个答案: