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-02 14:50:50Z

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 2, 2011 at 14:50

answered Jun 2, 2011 at 14:27

JohnP

50k13 gold badges112 silver badges142 bronze badges

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

5 Comments

Sonny Over a year ago

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.

JohnP Over a year ago

@Sonny I read it the other way around. What you need is trigger. Updated

Sonny Over a year ago

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.

JohnP Over a year ago

@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 : jsfiddle.net/6VHeP

Sonny Over a year ago

It turns out there was a different issue. Even my example code works as written.

wdm · Accepted Answer · 2011-06-02 15:21:27Z

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 2, 2011 at 15:21

answered Jun 2, 2011 at 14:49

wdm

7,1891 gold badge31 silver badges31 bronze badges

3 Comments

wdm Over a year ago

I'm thinking my reply is too simplified and JohnP's 'trigger' suggestion is the more accurate solution.

Sonny Over a year ago

This needs to be two separate $(document).ready(function() {}); code blocks.

wdm Over a year ago

@Sonny please see my edits. Tested this out and seems to be working.

Collectives™ on Stack Overflow

Trigger a jQuery Event Handler Assigned in a Different Code Block

2 Answers 2

5 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related