CODEWITHSUNDEEP
javascriptjqueryevents
Nick
Nick

Reputation: 19664

jQuery - Append an event handler to preexisting click event

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

Upvotes: 37

Views: 58669

Answers (5)

Volomike
Volomike

Reputation: 24886

Yes you can. Let's say that I have a tag cloud, and clicking a tag will remove the tag by default. Something like:

<div class="tags">
  <div class="tag">Tag 1</div>
  <div class="tag">Tag 2</div>
</div>

<script>
$(document).ready(function(){
  $('.tag').click(function(e){
    e.preventDefault();
    $(this).fadeOut('slow',function(){
      $(this).remove();
    });
    return false;
  });
});
</script>

Now let's say that's bundled into an included library for a project, but you want to provide a developer-friendly way to intercept those click events and prompt the user an AYS (Are You Sure?) dialog. In your mind you might be thinking something like:

<script>
$(document).ready(function(){
  $('.tag').beforeRemove(function(){
    if (AYS() === false) {
      return false; // don't allow the removal
    }
    return true; // allow the removal
  });
});
</script>

The solution, therefore, would be:

<div class="tags">
  <div class="tag">Tag 1</div>
  <div class="tag">Tag 2</div>
</div>

<script><!-- included library script -->
$(document).ready(function(){

  $.fn.beforeRemove = $.fn.click;

  $('BODY').on('click','.tag',function(e){
    e.preventDefault();
    console.log('debug: called standard click event');
    $(this).fadeOut('slow',function(){
      $(this).remove();
    });
    return false;
  });
});
</script>

<script><!-- included in your page, after the library is loaded -->
$(document).ready(function(){

  $('.tag').beforeRemove(function(){
    var sWhich = $(this).text();
    console.log('debug: before remove - ' + sWhich);
    return false; // simulate AYS response was no
    // change return false to true to simulate AYS response was yes
  });

});

</script>

In this example, the trick is that we extended jQuery with a beforeRemove trigger that is a duplicate of the click trigger. Next, by making the library utilize the $('BODY').on('click','.tag',function(e){...}); handler, we made it delay and call after our page's beforeRemove trigger fired. Therefore, we could return false in beforeRemove if we got a negative AYS condition and therefore not allow the click event to continue.

So, run the above and you'll see that clicks on the tags won't remove the item. Now, switch the beforeRemove function to return true (as if you had a positive response to an AYS prompt), and the click event is allowed to continue. You have appended an event handler to a preexisting click event.

Upvotes: 1

Jishnu A P
Jishnu A P

Reputation: 14382

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>

Upvotes: 5

jessieloo
jessieloo

Reputation: 1872

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

Upvotes: 7

Felix Kling
Felix Kling

Reputation: 816404

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.

Upvotes: 34

chim
chim

Reputation: 8573

Ajax can complicate the issue here. If you call two events the first being an ajax call, then the second event will probably fire well before the response comes back.

So even though the events are being fired in the correct order, what you really need is to get in to the callback function in the ajax call.

It's difficult to do without editing the original code.

Upvotes: 1

Related Questions