I have a function A that does something (calls a web service in ajax request) and I have another function that is plugged in a calendar and that triggers on different events (click on day changes date, click on month changes calendar month... pretty typical calendar stuff).

The calendar works with classes: when the user clicks on a day item, the function that handles this event first determines the attr('id') of the calendar that fired this event and then works on the calendar with this ID. There could be several calendars on the same page. When the user clicks on a date on a certain calendar, I want function A to execute. I could simply call function A from the calendar click functions by hard-coding the ID of the calendar and if the function executes on calendar ID xyz then do the regular things AND also call function A.

In general terms, what I want to do is create a jquery event listener that calls function A when a certain event is raised on one of my calendars. Something "listen to this function being executed on calendar xyz and when you hear something, call function A". How do you setup an event listener like this in jquery?

Thanks for your suggestions.

I have a function A that does something (calls a web service in ajax request) and I have another function that is plugged in a calendar and that triggers on different events (click on day changes date, click on month changes calendar month... pretty typical calendar stuff).

The calendar works with classes: when the user clicks on a day item, the function that handles this event first determines the attr('id') of the calendar that fired this event and then works on the calendar with this ID. There could be several calendars on the same page. When the user clicks on a date on a certain calendar, I want function A to execute. I could simply call function A from the calendar click functions by hard-coding the ID of the calendar and if the function executes on calendar ID xyz then do the regular things AND also call function A.

In general terms, what I want to do is create a jquery event listener that calls function A when a certain event is raised on one of my calendars. Something "listen to this function being executed on calendar xyz and when you hear something, call function A". How do you setup an event listener like this in jquery?

Thanks for your suggestions.

• javascript
• jquery

• Can we see some code? In general, there shouldn't be any reason to pass ids around, when you can use the DOM elements themselves. – Eric Commented Oct 5, 2011 at 18:55

3 Answers 3

You can use:

$('#parentElementID').delegate('fromElementSelector','eventType',
    function(){
        // do stuff here when the event is detected from an element that matches the selector
    });

JS Fiddle demo of concept.

References:

• delegate().

This sounds a lot like rudimentary observer patterns.

<!-- I know that a number class is BAD. Just for sake of illustration. -->
<div class='calendar 1'></div>
<div class='calendar 2'></div>

You can tell .calendar.1 to react to a certain event, say, foo by firing a specific function, say, bar.

$('.calendar.1').bind('foo', bar);

Of course you can have multiple calendars listen in on the foo event, and each react with their own version/s of bar. Consequently, multiple calendars can also share the exact same bar reaction.

$('.calendar.2').bind('foo', function () { });

Now, when you want your calendars to react, it's just a matter of triggering the specific event (in this case, foo), and letting the different individual calendars do their thing. If something happens in one calendar that merits you to call the foo event, it's just a matter of doing something like the following (for example, inside a click handler):

$('.calendar').trigger('foo');

Of course, you can have multiple different events (you might also want to look at jQuery event namespacing), multiple different calendars, and multiple different "function reactions", so there should be a high degree of flexibility.

You need the .click event. Probably something like this:

$(day).click(function()
{
    A();
})

where A is your function and day is a variable containing the selector or DOM element referencing the day in question. If you provide sample markup, I can be more specific with that part.

http://api.jquery./click/