为什么jquery无法看到html中的更改？

Question

我发出一个Ajax请求，然后更改属性值。在DOM中，一切都会按预期进行更改。但是，当我再次单击该按钮时，旧属性值将显示在控制台中。看来他看不到标记的变化并加载了旧数据。

$('.more_credits_first').click(function () {
	var button = $(this)
	var show = $(button).data('show');
	console.log(show)

	if (show == 'show') {
		$.get(window.location.pathname,{}).done(function(data){
			$('.tbody.main_credits').append(data.template);
			$(button).attr('data-show', 'hide');
			$(button).text('Hide');
		})
	}	else {
		$(this).attr('data-show', 'show');
		$(this).text('More');
	}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class='more_credits_first' type="button" data-show='show'>Button</button>

Answer 1

请参阅文档：

从jQuery 1.4.3开始，data- *属性用于初始化jQuery数据。第一次调用data（）方法时，将检索元素的data- *属性，然后不再对其进行访问或更改（所有值均由jQuery内部存储）。

jQuery缓存data()。您可以使用属性值对其进行初始化，但是jQuery只会查看其内部记录。

请勿将jQuery的data()API与混合使用attr()。也data()用于设置值。