title: JQuery event listener execute first
body: <p>The problem is the following:</p>
  
  <p>I have an external library that has an event listener over a certain div (.MagicThumb-swap) and when the user clicks it the library does some work.</p>
  
  <p>I have to add an event listener that has to execute BEFORE the one of the library. </p>
  
  <p>This is the code of the event listener that I want to run first:</p>
  
  <pre><code>$(".MagicThumb-swap").on("click", function () {
      $("#Zoomer2").show();
      $("#videoShow").remove();
  });
  </code></pre>
  
  <p>The question is: How do I make my event listener execute before the other one? I'm not allowed to modify the library so modifying the other event is out of question.</p>
  
  <p>EDIT:</p>
  
  <p>I have my code like this:</p>
  
  <pre><code> &lt;script&gt;
      $(document).on("click", ".MagicThumb-swap &gt; img", function () {
          console.log("clicked");
          $("#Zoomer2").show();
          $("#videoShow").remove();
      });
  
      $(document).on("click", ".videoShowMini", function () {
          $("#videoShow").remove();
          $("#Zoomer2").hide();
          $("#zoomerContainer").prepend("&lt;div id='videoShow'&gt;" + $(this).html() + "&lt;/div&gt;");
  
      });
  &lt;/script&gt;
  &lt;script src="../magiczoomplus/magiczoomplus.js" type="text/javascript"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>and it's still not executing first.</p>