ordre des événements onclick

Question

Je souhaite ajouter un événement jquery click aux événements href qui ont déjà un événement onclick. Dans l'exemple ci-dessous, l'événement onclick codé en dur sera déclenché en premier. Comment puis-je inverser cela?

<a class="whatever clickyGoal1" href="#" onclick="alert('trial game');">play trial</a> 
<br /> 
<a class="whatever clickyGoal2" href="#" onclick="alert('real game');">real trial</a> 
<p class="goal1"> 
</p> 
<p class="goal2"> 
</p> 

<script type="text/javascript"> 
    $("a.clickyGoal1").click(function() { 
     $("p.goal1").append("trial button click goal is fired");//example 
    }); 
    $("a.clickyGoal2").click(function() { 
     $("p.goal2").append("real button click goal is fired"); //example 
    });   
</script> 

Answer 1

Vous aurez besoin d'obtenir le gestionnaire d'événements d'origine, le remplacer par votre propre puis appeler le gestionnaire d'origine, mais je ne sais pas si cela est possible avec jQuery. Voici un exemple en utilisant jQuery seulement pour accéder à l'élément et JavaScript "normal" pour définir le gestionnaire:

// Wrapper in order not to add unnecceary variables to the global namespace 
(function(){ 
    var link = $("a.clickyGoal1")[0]; 
    var oldOnClick = link.onclick; 
    link.onclick = function(e) { 
    $("p.goal1").append("trial button click goal is fired"); 
    oldOnClick(e); 
    } 
})(); 

Answer 2

• DEMO:http://so.devilmaycode.it/order-of-onclick-events

$(function() { 
     $("a.whatever").removeAttr('onclick').click(function(e) { 
      e.preventDefault(); 
      var text = $(this).text(); 
      var cls = this.className.split(' ')[1].split('clickyGoal')[1]; 
      $('p.goal' + cls).fadeOut(500,function() { 
       $(this).html(text+' button fired '+cls).fadeIn(500,function() { 
        alert(text); 
       }); 
      }); 
     }); 
    });