Using Non-standard Attributes

I am having trouble passing around values without using global variables when I am creating html/jquery applications. Quick example 1) Load a table with a class such as 'playersTab

Solution 1:

Without knowing why you need to attach all that data to DOM elements it's hard to give concrete advice.

First, I'd consider using data- attributes.

Second, I'd consider using jQuery's data() method if you're attaching the data dynamically.

Third, I'd consider what data you actually need, and when.

Fourth, and probably most importantly, the ID attribute probably isn't really what you want to be setting.

Use a data-id element and get the ID that way; a simple numeric value isn't a valid ID. Unless you actually need to refer to the DOM element by ID, why bother? Usually what you really need is to just look up (or down) the nearby hierarchy and find the parent row etc. to pull out a single value, like data("id").

Solution 2:

I recommend you to use data-* attributes, either with pure JavaScript element.getAttribute('data-some_attr_name') or with jQuery element.data('some_attr_name').

Browser support: http://caniuse.com/dataset

jQuery data docs: http://api.jquery.com/data/