Question

I want to add some jQuery functionality to our sites where one piece of markup will have a click handler which will need to cause action to happen on another piece of markup, i.e. A is a trigger for action from B. There’s no guarantee about the relative structure of A and B, so I can’t rely on a jQuery selector, plus each unique A will need to relate only to its unique counterpart B.

What is the general consensus on the best way to proceed in such a circumstance?

Option 1: Who cares about XHTML compliance, it’s overrated anyway. We have untrained web content producers able to inject markup into our site anyway so strict XHTML compliance would be a pipe dream. Just make up tag attributes and read their values with jQuery.

Example:
<div class="jquery-feature-trigger" actson="targetID">Trigger</div>

Option 2: Use attributes that look like HTML, but shouldn’t really be used for that purpose.

Example:
<div class="jquery-feature-trigger" rel="targetID">Trigger</div>

Option 3: Use namespaces like ASP.NET 4.0 is setting out to do.

Example:
<div class="jquery-feature-trigger" custom:actson="targetID">Trigger</div>

If you want to recommend Option 3, I would appreciate a link to what is required to get this to work as I really have no idea if a DTD has to be made or how to link it in.

Option 4: The Stack Overflow community has a better idea…???

Answer 1

You could investigate the jQuery Metadata plugin, which can store JSON metadata in the class attribute (or various other places). Example:

<div class="jquery-feature-trigger { actson: 'targetID' }">Trigger</div>