Manually triggering a jQuery click event from within another object's click event

Question

I'm working on a little web app where clicking on one div (call it element "A") needs to change the position of itself and another div (call it element "B"), and vice versa.

The functionality would go something like this:

Click 'A' {
  A is moved some number of pixels closer to the mouse position (making use of jQuery's .pageX and .pageY event object properties)
  B's click event is manually triggered, moving it some number of pixels closer to the mouse
}

I figured I would just bind click event handlers to both A & B. If A were clicked I would manually trigger B's click event (using jQuery's .trigger(), and vice versa. Unfortunately manually triggering the click event for one object from within the other object's handler isn't working for me--e.g. in the example above, I can't retrieve pageX and pageY properties when triggering div B's click event.

I've included an example to illustrate this point here: http://jsfiddle.net/tZFNk/2/.

Cheers and thanks in advance for your help.

Andomar · Accepted Answer · 2011-12-19 19:21:36Z

6

You mispelled the word "question". Try:

$('#aQuestion').trigger('click');

instead of

$('#aQestion').trigger('click');

answered Dec 19, 2011 at 19:21

Andomar

239k55 gold badges387 silver badges412 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Al R. Over a year ago

Thanks for picking up that typo. I corrected that and switched to '.triggerHandler()' but pageX and pageY are still undefined...

Rafay Over a year ago

@AlR. that is because you triggered the click programatically

nachito Over a year ago

The selector being wrong is not the real issue. @3nigma, you've got it!

nachito · Accepted Answer · 2011-12-19 19:33:20Z

2

Trigger the event using the first event's pageX and pageY properties.

$('#aQuestion').bind('click', function(e, f){
    // Use the original pageX property if it exists, else use pageX set by triggered event.
    if (e.pageX !== undefined) {
        alert('x-pos: ' + e.pageX + ', y-pos: ' + e.pageY);
    } else {
        alert('x-pos: ' + f.pageX + ', y-pos: ' + f.pageY);
    }
});

$('#aDiv').bind('click',function(e){
    // Trigger event on #aQuestion with the current click coordinates.
    $('#aQuestion').trigger('click', { pageX: e.pageX, pageY: e.pageY });
    alert('Nothing happens!')
});

http://jsfiddle.net/tZFNk/20/

answered Dec 19, 2011 at 19:33

nachito

7,0352 gold badges28 silver badges44 bronze badges

Comments

Rafay · Accepted Answer · 2011-12-19 19:22:12Z

2

$('#aQuestion').click();

or

$("#aQuestion").trigger('click');

you have a typo

http://jsfiddle.net/tZFNk/7/

answered Dec 19, 2011 at 19:22

Rafay

31.1k5 gold badges71 silver badges106 bronze badges

Comments

Abbas · Accepted Answer · 2011-12-19 19:51:16Z

1

The event properties don't seem to be propagating correctly, as nachito has already identified in his response. However, you don't have to construct and assign values to a new object, just pass the 'e' object in the trigger function:

$('#aQuestion').bind('click',function(e, evt){
    var pageX = e.pageX || evt.pageX;
    var pageY = e.pageY || evt.pageY;
    alert('x-pos: ' + pageX + ', y-pos: ' + pageY);
});

$('#aDiv').bind('click',function(e){
    $('#aQuestion').trigger('click', e);
    alert('Nothing happens!')
});

answered Dec 19, 2011 at 19:51

Abbas

6,8944 gold badges38 silver badges49 bronze badges

Comments

nishant baranwal · Accepted Answer · 2013-07-31 18:23:14Z

0

    $(document).ready(function(){

        $("#button2").each(function(){
            var buttonOld = this;
            $('#button1').bind('click',function(){$(buttonOld).trigger('click')});
        })
    })

answered Jul 31, 2013 at 18:23

nishant baranwal

1

Collectives™ on Stack Overflow

Manually triggering a jQuery click event from within another object's click event

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related