JQuery事件侦听器首先执行

Question

问题如下：

我有一个外部库，它在某个div (.)上有一个事件侦听器，当用户单击它时，库会做一些工作。

我必须添加一个必须在库前面执行的事件侦听器。

这是我想首先运行的事件侦听器的代码：

$(".MagicThumb-swap").on("click", function () {
    $("#Zoomer2").show();
    $("#videoShow").remove();
});

问题是:如何使我的事件侦听器在另一个事件侦听器之前执行？我不允许修改库，所以修改另一个事件是不可能的。

编辑：

我有这样的代码：

 <script>
    $(document).on("click", ".MagicThumb-swap > img", function () {
        console.log("clicked");
        $("#Zoomer2").show();
        $("#videoShow").remove();
    });

    $(document).on("click", ".videoShowMini", function () {
        $("#videoShow").remove();
        $("#Zoomer2").hide();
        $("#zoomerContainer").prepend("<div id='videoShow'>" + $(this).html() + "</div>");

    });
</script>
<script src="../magiczoomplus/magiczoomplus.js" type="text/javascript"></script>

但它还是没有先执行。

Answer 1

如果在调用将设置自己的处理程序的库函数之前调用事件注册代码，则将首先调用处理程序。

例如，如果您使用的是jQuery滑块插件

// Call your event registering code 
$( ".selector" ).click(function(){ console.log('My event handler')});
// Now initialize the external lib
$( ".selector" ).slider({ animate: "fast" });

请注意，如果使用事件委托，事件处理程序将在直接设置在元素上的事件之后调用(因为它必须等到事件在树上冒泡时才会调用)。

我认为解决这个问题的唯一方法是不使用事件委托。

$(".MagicThumb-swap > img").click(function () {
    console.log("clicked");
    $("#Zoomer2").show();
    $("#videoShow").remove();
});

$(".videoShowMini").click( function () {
    $("#videoShow").remove();
    $("#Zoomer2").hide();
    $("#zoomerContainer").prepend("<div id='videoShow'>" + $(this).html() + "</div>");
});

还请注意，如果您根本不希望调用它们的处理程序，则必须调用http://api.jquery.com/event.stopimmediatepropagation/

这意味着，如果要动态插入.MagicThumb-swap > img元素，则必须在将元素添加到DOM (因此有效)时注册处理程序，并在从DOM中删除元素时删除处理程序(以防止内存泄漏)。

Answer 2

从我的阅读方式来看，这个神奇的外部库似乎会自动侦听.MagicThumb-swap元素，当单击元素时，您希望您的代码触发，然后触发它们的代码。

我就是这样做的：

$(".MagicThumb-swap-handler").on("click", function () {
    $("#Zoomer2").show();
    $("#videoShow").remove();
    $(".MagicThumb-swap").click();
});

因此，基本上，创建另一个新元素作为实际操作的处理程序。当单击元素.MagicThumb-swap-handler时，它会执行它的操作，然后一旦完成，就会触发.MagicThumb-swap的click事件。