Trigger a jQuery Event Handler Assigned in a Different Code Block

Question

I have a case where a click handler is defined/assigned in one jQuery code block (file) and I want to trigger it from another click event defined/assigned in a different jQuery code block. How can I accomplish this?

The following code is a greatly simplified version of what I am trying to accomplish. The behavior I want to see is a JavaScript alert "Element One" when I click #Element2.

Example HTML:

<p id="Element1">Element One</p>
<p id="Element2">Element Two</p>

First jQuery code block:

$(document).ready(function() {
    $('#Element1').click(function() {
        alert('Element One');
    });
});

Second jQuery code block:

$(document).ready(function() {
    $('#Element2').click(function() {
        $('#Element1').click();
    });
});

UPDATE: My original example actually works. I was building upon my field hint jQuery UI Dialog solution, and didn't account for about the 'clickoutside' handler that I was using. Adding a check to for the second element in my 'clickoutside' handler allows the dialog to display.

JohnP · Accepted Answer · 2011-06-02T14:50:50.677

2

You need to trigger a click when you click on the first element. You can use the trigger method for this.

function element1Hanlder () {
    alert('Element One');
}

$(document).ready(function() {
    $('#Element1').click(function() {
        alert('Element One');
    });
});

$(document).ready(function() {
    $('#Element2').click(function() {
        $('#Element1').trigger('click');
    });
});

edited Jun 02 '11 at 14:50

answered Jun 02 '11 at 14:27

JohnP

49,507
13
108
140

You're assigning the handler to `#Element1` a second time when `#Elment2` is clicked which is not what I am trying to accomplish. I want to trigger the handler that was already assigned. – Sonny Jun 02 '11 at 14:46
@Sonny I read it the other way around. What you need is `trigger`. Updated – JohnP Jun 02 '11 at 14:51
It's still not working for me. I assume it's a scoping issue because the handler is defined inside the first anonymous `$(document).ready(function() {...});` call, and is not visible in the second anonymous call. – Sonny Jun 02 '11 at 15:03
1

@sonny the scope shouldn't matter here. You're simply triggering a click on the element. Do you have any other event handlers on it? Here's an example : http://jsfiddle.net/6VHeP/ – JohnP Jun 02 '11 at 15:37
It turns out there was a different issue. Even my example code works as written. – Sonny Jun 02 '11 at 15:41

wdm · Answer 2 · 2011-06-02T15:21:27.810

1

EDIT: This is based on JohnP's "trigger" suggestion (so you should choose him as the right answer)...

If I load this block from an external js file...

$(document).ready(function() {

    $('#Element1').click(function () {
        alert( $(this).text() );
    });

});

Then load this in a script tag within the HTML itself...

$(document).ready(function() {

    $('#Element2').click(function () {
        $('#Element1').trigger('click');
    });

});

Seems to be working as intended.

edited Jun 02 '11 at 15:21

answered Jun 02 '11 at 14:49

wdm

7,121
1
27
29

1

I'm thinking my reply is too simplified and JohnP's 'trigger' suggestion is the more accurate solution. – wdm Jun 02 '11 at 14:58
This needs to be two separate `$(document).ready(function() {});` code blocks. – Sonny Jun 02 '11 at 15:05
1

@Sonny please see my edits. Tested this out and seems to be working. – wdm Jun 02 '11 at 15:22

Trigger a jQuery Event Handler Assigned in a Different Code Block

2 Answers2

Linked