порядок событий onclick

Question

Я хочу добавить событие jquery click для href, у которого уже есть событие onclick.В приведенном ниже примере сначала жестко запрограммировано событие onclick.Как я могу изменить это?

<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

Вам нужно будет получить оригинальный обработчик событий, заменить его на свой собственный, а затем вызвать оригинальный обработчик, однако я не уверен, возможно ли это с jQuery. Вот пример использования jQuery только для доступа к элементу и затем «нормального» JavaScript для установки обработчика:

// 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

• ДЕМО: 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);
                });
            });
        });
    });