Question

following is my code

HTML :

<div id = "content" >
  <div class = "child" >Hello !! </div>
</div>

Javascript :

$(function() {
  $('#content .child').click(function() {
          //print the selected jQuery parameters
  });
});

I need to capture parameters which I pass to jQuery function in above code,
I want to print the output as #content .child.

Thank you !!

Answer 1

Write your own wrappers for click, focus, .. events that provide this functionality. Writing such a wrapper is fairly trivial. Here’s one way:

jQuery.fn.addClick = function(fn) {
    var selector = this.selector; // capture the selector here
    this.click(function(event) { // write a wrapper for the click handler
        fn(event, selector); // call the user's handler and pass it the selector
    });
};

Your event handler function now gets two params instead of one. First is event, and the second is the selector that was used to bind this event.

$("#content .child").addClick(function(e, selector) {
    alert(selector); // "#content .child"
});

The advantage of wrapping it up with closures is that you can bind multiple click events to the same element with different selectors, and they will all work together.

See an example.