jquery call event handler function within other event handler

Question

I have something like this

<div id="id">
    <button name="one">One</button>
    <button name="two">Two</button>
</div>

var testClass = {

    initialise: function (a, b) {

        jQuery('#id button').each( function(){

            if (jQuery(this).name=='one'){
                jQuery(this).click( function ( event ) {
                    //do something else
                    testClass.whenClicked ( data: {a:a, b:b }, target: this ); // how do I pass event into whenClicked here??
                });
            }else{
                jQuery(this).click(data: {a:a, b:b }, testClass.whenClicked );
            }
        }
    },

    whenClicked: function (event){

        event.preventDefault();
        alert(event.data.a);
    };



}

testClass.initialise('a','b');

When I click on "One" how can I call the existing event handler function, from within my conditional statement and pass through the event object, so that event.preventDefault() will work.

Instead I'm currently getting "object has no function eventDefault", because event inside whenClicked is this.

I have set up a fiddle here: http://jsfiddle.net/5TbVK/1/

Answer 1

I think you are overcomplicating it. You want to call the function.

  this.whenClicked();

Not bind another click event based upon the first click.

Try this:

http://jsfiddle.net/5TbVK/4/