Thinkphp uses data-options to step on the pit record

1. Error code:

<a class="item" href="javascript:;" data-options="{$items['提现记录']|json_encode}"></a>
<script type="text/javascript">
	//监听点击
	$('.item').on('click', function(){
		var options = $(this).data('options');
		console.log(options);
	});	
</script>

In the thinkphp template, the above code data-options uses single quotes , and as a result, the json data value cannot be output correctly.

2. Correct code:

<a class="item" href="javascript:;" data-options='{$items["提现记录"]|json_encode}'></a>
<script type="text/javascript">
	//监听点击
	$('.item').on('click', function(){
		var options = $(this).data('options');
		console.log(options);
	});	
</script>

In the thinkphp template, the above code data-options uses double quotes , and the json data value is successfully output, as shown below:

HTML data-* attributes

1. Definition and usage

The data-* attributes are used to store the private custom data of the page or application.

The data-* attributes give us the ability to embed custom data attributes on all HTML elements.

The stored (custom) data can be used in the JavaScript of the page to create a better user experience (no Ajax calls or server-side database queries).

The data-* attribute consists of two parts:

• The attribute name should not contain any uppercase letters, and there must be at least one character after the prefix "data-"
• The attribute value can be any string

Note: User agents will completely ignore custom attributes prefixed with "data-".

2. Differences between HTML 4.01 and HTML5

The data-* attributes are new attributes in HTML5.

3. Browser support

All major browsers support data-* attributes.

4. Grammar

<element data-*="somevalue">

value	description
somevalue	Specifies the value of the attribute (in a string).