Combine Multiple Actions in jQuery on()

Question

I am wondering if it is possible to combine multiple actions to the same on() function?

My code:

$(document).on('mouseout', '#tip', function() {
    $('#tip .ttip').show();
});

$(document).on('click', '#tip', function() {
    $('#tip .ttip').show();
});

I have tried the following, but they both did not work.

$(document).on('mouseout, click', '#tip', function()
$(document).on({'mouseout', 'click} '#tip', function()

Answer 1

You almost had it ..

You need to use a space between the events

$(document).on('mouseout click', '#tip', function() {
    $('#tip .ttip').show();
});

Although, binding to the document is frowned upon. It mimics the .live method which has been deprecated for this reason (and a few others).

Quote

For best performance, attach delegated events at a document location as close as possible to the target elements. Avoid excessive use of document or document.body for delegated events on large documents.

---

See the docs at http://api.jquery.com/on/

Quoting

on( events [, selector] [, data], handler(eventObject) )
events One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".