Clicking on one button to trigger click event on another

Question

I want to click on button 2 to trigger a click event on button 1.

However, when I try the following, nothing happens when clicking on #2: no alert for #1 or #2.

Answer 1

When you need to call click event of any button then syntax is as below

$('selector').trigger(event);

selector -> which tag's event you need to fire

event -> which event you need to fire

In your case you need to change following one line

$('#button-1').trigger(e);

here you need pass event of e like click event, select event, etc.

so solution is replace this line with any of the following line

$('#button-1').trigger(e.type); 

$('#button-1').trigger("click");

Answer 2

Use

$('#button-1').trigger('click');

or

$('#button-1').trigger(e.type);

http://jsfiddle.net/8RnBf/17/

instead of

$('#button-1').trigger(e);

JSFIDDLE DEMO

Read about jquery .trigger() here

Answer 3

To properly trigger a delegated event you have to create an event object and pass it to trigger()

$('#container').on( "click", '#button-2', function(e){
    var event = jQuery.Event(e.type);
    event.target = $('#button-1').get(0);

    $('#container').trigger(event);
});

FIDDLE

That way you're actually triggering the event on the element it was bound to, passing the selector the delegated event handler will filter on as the event.target, so it will fire just as it would if the element was actually clicked.

Or you could use the original event if you change the event.target

$('#container').on( "click", '#button-1', function(e){
    alert('CLICKED 1');
});

$('#container').on( "click", '#button-2', function(e){
    e.target = $('#button-1').get(0);
    $('#container').trigger(e);
});