Attaching JQuery delegate for more than one event to a handler

Question

Hi guys,

I read that the new delegate method can attach more than one event to a handler however I have not see this in practice. Would anyone type a code for this please.

I tried:

$("body").delegate("input", "mouseup", "mouseover", function() {
            $(this).after("<p>Another paragraph!</p>");
        });

and it appended the paragraph only on mouseup. I am confused.

Answer 1

Use a space delimiter for events like this:

$("body").delegate("input", "mouseup mouseover", function() {
   $(this).after("<p>Another paragraph!</p>");
});

You probably meant to select <input> elements, I changed this above, correct me if you meant otherwise.

Alternatively, use .bind() like this:

$("body input").bind("mouseup mouseover", function() {
   $(this).after("<p>Another paragraph!</p>");
});

I find this easier to read, but whatever floats your boat.

Answer 2

The reference (http://api.jquery.com/delegate/) says about second parameter:

A string containing one or more space-separated JavaScript event types, such as "click" or "keydown," or custom event names.

Therefore, in your case:

$("body").delegate("input", "mouseup mouseover", function() {
            $(this).after("<p>Another paragraph!</p>");
        });