«

»

Jun 16

Print this Post

jQuery event object

This post is copy of a part of previous post. I’ve just started to adding new updates to the previous one and finally decided to make it a different one ;) What is it about? It’s about something most of you know if you work a lot with jQuery or if you read its documentation more carefully than I did. It’s about an interesting property in jQuery event object and some interesting results of using jQuery on() method.

If you want to bind a function to click event of an element it is quite easy if the element exist in DOM after page is loaded. For example:

<form>
  <button type="button">Click Me!</button>
</form>
(function(){
  $('button[type=button]').click(function() {
    //an action here...
  });
})();

or

(function(){
  $('button[type=button]').bind('click', function() {
    //an action here...
  });
})();

But if the button is added later after an AJAX call for example we should use $.on() function (before it was $.live() and/or $.delegate()):

(function(){
  $('form').on('click', 'button[type=button]', function() {
    //an action here...
  });
})();

It works “the same” but problem occurs if you want to do something with the event target. For example hide or disable the clicked button. If element is in the DOM, it is easy and it works:

(function(){
  $('button[type=button]').bind('click', function(e) {
    var target = e.target;
    $(target).hide();
  });
})();

But if the element is not in the DOM and you use $.proxy() it happens to be harder and tricky unless you read jQuery manual ;)

(function(){
  $('form').on('click', 'button[type=button]', $.proxy(function(e) {
    var target = e.currentTarget;
    $(target).hide();
  }, this));
})();

Maybe I will play with it more and write more about it later because right now I did not even check if the code I had written above is correct ;)

Update (2012-06-07):
I put the code above to a test file and it works. However, I hadn’t expected it to work the way it worked :P I expected e.target and e.currentTarget to be different when I used jQuery on() method. At the begining I thought it worked correctly because the code didn’t change DOM anyhow. So, I created another test file with DOM modifications. Again — the results weren’t as I had expected them to be ;) It was like that during our work I mentioned above. Maybe the HTML there was more complicated that one from my examples and that was the case. I’ll investigate it more and if find out what is going on, I’ll update it here ;)

Update (2012-06-16):
The same day I wrote previous update I talked about the issue with my colleague. He had showed me the issue during our project work. He agreed with me our code was a lot more complicated than my examples. It was a wrapper with an image inside and unsorted list with anchors inside. Clicking on one of the anchor was supposed to trigger an event which changed the image. It took me few time to create another example. I’ve just added a wrapper then and bind an event to it. Clicking buttons and observing what’s going on in the console. It illustrate our issue a little bit.

Permanent link to this article: http://blog.lukaszewski.it/2012/06/16/jquery-event-object/

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>