thứ tự của sự kiện onclick

Question

Tôi muốn thêm sự kiện nhấp chuột jquery vào href của sự kiện đã có sự kiện onclick. Trong ví dụ bên dưới sự kiện onclick được mã hóa cứng sẽ được kích hoạt trước tiên. Làm cách nào để đảo ngược điều đó?

<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

Bạn cần phải xử lý sự kiện ban đầu, thay thế bằng trình xử lý ban đầu của mình, tuy nhiên tôi không chắc liệu điều đó có thể thực hiện được với jQuery hay không. Dưới đây là một ví dụ sử dụng jQuery chỉ để truy cập vào các phần tử và sau đó "bình thường" hoạt Javascript để thiết lập các handler:

// 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); 
       }); 
      }); 
     }); 
    });