onclick 事件的顺序

Question

我想向已经有 onclick 事件的 href 添加一个 jquery 点击事件。 在下面的示例中，硬编码的 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);
                });
            });
        });
    });