jQuery - Append an event handler to preexisting click event

Question

I have a click event that is defined already. I was wondering what the best way would be to append another event handler to this event without touching this code (if possible).

Is there a way to just append another event handler to the already defined click event?

This is the current click event definition:

 $(".HwYesButton", "#HwQuizQuestions")
        .append("<a href='javascript:void(0);' rel='.HwYesButton'>Yes</a>")
        .click(function(event) {
            var button = $(this).parent();
            var questionId = button.attr('id');
            $iadp.decisionPoint["HwQuizYourself"].Input.inputProvided(questionId);
            button.find(".HwNoButton").removeClass("HwButtonSelected");
            $(this).addClass("HwButtonSelected");
            button.removeClass("HwQuestionSkipped");

            $iadp.flat.setBoolean(questionId, true);
            return false;
        });

Answer 1

The only thing you can do is to attach another (additional) handler:

$(".HwYesButton", "#HwQuizQuestions").click(function() {
    // something else
});

jQuery will call the handlers in the order in which they have been attached to the element.

You cannot "extend" the already defined handler.

---

Btw. your formulation is a bit imprecise. You are not defining a click event. You are only attaching click event handlers. The click event is generated by the browser when the user clicks on some element.

You can have as many click handlers as you want for one element. Maybe you are used to this in plain JavaScript:

element.onclick = function() {}

With this method you can indeed only attach one handler. But JavaScript provides some advanced event handling methods which I assume jQuery makes use of.

Answer 2

I know this is an old post, but perhaps this can still help someone since I still managed to stumble across this question during my search...

I am trying to do same kind of thing except I want my action to trigger BEFORE the existing inline onClick events. This is what I've done so far and it seems to be working ok after my initial tests. It probably won't handle events that aren't inline, such as those bound by other javascipt.

        $(function() {
            $("[onClick]").each(function(){
                var x = $(this).attr("onClick");
                $(this).removeAttr("onClick").unbind("click");
                $(this).click(function(e){
                    // do what you want here...
                    eval(x); // do original action here...
                });
            });
        });

Answer 3

You can just write another click event to the same and the both will get triggered. See it here

<a id="clickme">clickme</a>
<script>
    $('#clickme').click(function () {
        alert('first click handler triggered');
    });
    $('#clickme').click(function () {
        alert('second click handler triggered');
    });
</script>