Question

问题如下：

我有一个外部库，它在某个div（.MagicThumb-swap）上有一个事件监听器，当用户点击它时，库可以正常工作。

我必须添加一个事件监听器，它必须在其中一个库之前执行。

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

$(".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后，它会完成它的操作，然后一旦完成，就会触发click的{{1}}事件。

首先执行JQuery事件监听器

2 个答案: