Слушателят на събития в JQuery изпълнява първо - javascript, jquery

Проблемът е следният:

Имам външна библиотека, която има слушател на събитие през определен 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="/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 (за да предотвратите изтичане на паметта)

---

0 за отговор № 2

По начина, по който го прочетох, изглежда, че тази вълшебна външна библиотека автоматично слуша .MagicThumb-swap елемент и когато щракнете върху елемента, който искате кодът ви да се активира, след това техният код.

Ето как щях да го направя:

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

Така че, създайте още един нов елемент, който действа като манипулатор за действителното действие, което искате. Когато елементът .MagicThumb-swap-handler щраква се, прави си всичко и след като свърши, изстрелва click събитие за .MagicThumb-swap.

---