JQueryイベントリスナーが最初に実行する - javascript、jquery

問題は次のとおりです。

特定のdiv（.MagicThumb-swap）に対するイベントリスナーを持つ外部ライブラリがあり、ユーザーがそれをクリックすると、ライブラリが何らかの作業を行います。

ライブラリの1つを実行する前に実行する必要があるイベントリスナーを追加する必要があります。

これは、最初に実行するイベントリスナーのコードです。

$(".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="/images/../magiczoomplus/magiczoomplus.js" type="text/javascript"></script>

まだ最初に実行されていません。

回答：

回答№1は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から要素を削除するときにハンドラーを削除する（メモリリークを防ぐため）

---

回答№2の場合は0

私の読み方からすると、この魔法の外部ライブラリは自動的に .MagicThumb-swap 要素を選択し、要素をクリックすると、コードを起動してからコードを起動します。

これは私がそれをやろうとする方法です：

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

したがって、基本的には、実際のアクションのハンドラーとして機能する別の新しい要素を作成します。要素が .MagicThumb-swap-handler クリックされると、その処理が行われ、処理が完了すると、 click 〜のためのイベント .MagicThumb-swap.

---