Best unobtrusive way to add JQuery confirm to an arbitrary element

Question

I'm new to jquery, and am looking for a good unobtrusive way to add a jquery replacement for javascript "confirm" to a HTML elements. Specifically I want to be able to use it for ASP.NET Buttons, LinkButtons, ImageButtons, HyperLink etc, which client-side means any of:

<input type="submit"... />
<a href="javascript:__doPostBack... />
<input type="image"... />
... etc ...

A solution I've come up with is to add a custom attribute to the ASP.NET server control (and hence to the client element), e.g.:

<asp:ImageButton ... data-confirmPrompt="OK to delete customer 123?" ... />

which renders as:

<input type="image" data-confirmPrompt="OK to delete customer 123?" ... />

I then just need to add a click handler for elements that have this custom attribute. The following example uses jquery-impromptu, but the same principle works with any of the jquery modal dialog implementations:

$(document).ready(function () {
    $("[data-confirmPrompt]").click(function (event) {
        var confirmPrompt = event.currentTarget.attributes['data-confirmPrompt'].value;
        event.preventDefault();
        $.prompt(confirmPrompt, {
            buttons: { Yes: true, No: false },
            callback: function (v, m, f) {
                if (v) {
                    // User clicked Yes.  Unbind handler to avoid
                    // recursion, then click the target element again
                    $(event.currentTarget).unbind('click');
                    event.currentTarget.click();
                }
            }
        });
    });
});

This all seems to work fine on IE8 with XHTML 1.0 Strict. So my questions are:

1. Will all modern browsers accept custom attributes like this?

2. I understand this is not strictly standard compliant. Can anyone suggest an standards-compliant alternative that is at least as unobtrusive and easy to use?

UPDATE added data- prefix to custom attribute, which I understand at least makes it HTML5 compliant.

UPDATE 2 See this follow-up question for an improved solution.

Answer 1

Use the data- attribute, see here

<a href='#' data-confirm="Are you sure?">Some Link</a>

Answer 2

Answer to 1: Yes they will.

Answer to 2: You could add CSS class called requires-confirm and add data-description or data-meta attribute with additional text that you'd use in your handler.

Why both?

In case you have more than one functionality integrated in your page. CSS class tells which functionality should be added and data- attribute holds metadata to use.

If you'll only be using one single functionality, you can easily omit CSS reference and just use the data- attribute of course.

Answer 3

personally, I use a specific class for things like that.

The main reason is that they are easy to select with something like $('.confirm').each() or better $('.confirm').youConfirmPlugin(). Moreover, a css is easily added in a css file (where it belongs).

if extra data is needed, then yes, use the data attribute in combination with the class.