Data attributes are the way to go when using jquery/js to pass data from an element via a click.

Example 1a: jQuery, most simple method:

<a id="some-id">
	Click me!
</a>

<script>
$("#some-id").click(function(){  
	alert('That felt good!');
});
</script>

Example 1b: Jquery, use data attributes on click:

<a id="option1" data-id="10" data-option="21" href="#">
	   Click to do something
</a>

<script>
$('#option1').on('click', function () {
	var $el = $(this);	
	console.log($el.data('id'), $el.data('option'));
});
</script>

Example 2: Jquery, using a function to show data attributes on click.

<a id="option1" data-id="10" data-option="21" href="#" onclick="goDoSomething(this);">
	Click to do something
</a>
<script type="text/javascript">
	function goDoSomething(e){
		alert("data-id:" + $(e).data('id') + ", data-option:" + $ (e).data('option'));
	}
</script>

Example 3: Straight up JS with a function:

<a id="option1" 
	   data-id="10" 
	   data-option="21" 
	   href="#" 
	   onclick="goDoSomething(this);">
	Click to do something
</a>

<script type="text/javascript">
	function goDoSomething(e) {
		alert(e.getAttribute("dada-id"));
	}
</script>
 

Changing Data Attributes on the Page

Data attributes are interesting because if you use them as data they will be in the memory/environment but not changed on the page.

AJAX and changing content: To SEND the new values set the data attributes using the .attr(...) method. To use them be sure to put values in the environment via .data(...)

IMPORTANT: When using data(...) method do not include data- like you do in the .attr(...) method. It will not work.

To change them on the page adjust them as attributes attr

var a = $('#mydiv').data('data-thickness'); //getter

$('#mydiv').attr('data-thickness',20); //setter for attribute

$('#mydiv').data('thickness',20); //setter memory/environment

Example of .attr and .data using the Open Reviews "load more reviews" js.

When loading more reviews we need to use limit and offset in the query statement. We put those in the load more trigger via data attributes.

The initial globals are set in the module for the initial mvt:item call to get a list of reviews (which are shown above the "load more reviews" span.)

<span id="openreviews-load-more" data-openreviewsoffset="&mvte:global:openreviews_offset;" data-openreviewslimit="&mvte:global:openreviews_limit;">Load More Reviews</span>

In the code below we have to send the limit and the offset via the ajax call using the ajax data: param.

We get those values using globals that were pre set or sent via ajax. Each "load more" span has an increase in the offset this way.

The tricky part is to make sure you update the data attribute in the "load more" span while also updating the same variable in the js environment because otherwise the data_offset and data_limit vars will simply stay the same, even if the attributes in the "load more" line change.

Doesn't make that much sense since at the top of the js below we reset the data_offset and data_limit by reading the data attributes. Although I'm sure it makes sense so someone.

<MvASSIGN NAME = "l.json_list_more_url" VALUE = "{ g.module_json $ '?store_code=' $ g.store_code $ '&function=Module&module_code=openreviews&module_function=reviews_load&openreviews_type=' $ l.all_settings:openreviews_type $ '&openreviews_code=' $ l.all_settings:openreviews_code $ '&session_type=runtime' }" />

$('#openreviews-load-more').click(function() {

// this stuff just handles setting the offset and limit that will be sent via ajax. Various conditions, turning into numbers, etc...

					var $el = $(this);
					var data_offset =  $el.data('openreviewsoffset');
					var data_limit = $el.data('openreviewslimit'); 
					
					if ( !data_limit ) {
						data_limit = <MvEVAL EXPR = "{ g.openreviews_limit }">;
					}
  
					if ( !data_offset ) {
						data_offset = 0;
					}
					var or_offset = Number(data_offset);
					var or_limit = Number(data_limit);
					var dataOffset = or_offset + or_limit;
					if ( dataOffset <= 0 ) {  
						dataOffset = 10;
					}

// this is the ajax call. the "append(result)" second adds the stuff to the bottom of the content in the #openreviews-review-list div element.
// The .attr sets the data attributes in the "load more" span
// The .data set the same var/values for the being used in the environment/memory. This must be done or reading it in the first three lines just doesn't work.
// Note- this is only if you are changing stuff up via the ajax call. If it's a one and done click situation then the regular .attr will work fine.

					$.ajax({
						url: '<MvEVAL EXPR = "{ l.json_list_more_url }">',
						data: { openreviews_offset: or_offset, openreviews_limit: or_limit },
						type: 'POST',
						success: function (result) {	
							$("#openreviews-reviews-list").append(result);
							$('#openreviews-load-more').attr('data-openreviewsoffset',dataOffset);  
							$('#openreviews-load-more').attr('data-openreviewslimit',or_limit);							
							$('#openreviews-load-more').data('openreviewsoffset',dataOffset);  
							$('#openreviews-load-more').data('openreviewslimit',or_limit);  
							
						}
					});							
				});