jquery - 写入 data-* 属性并使用 jQuery .data() 获取它

Question

这个问题已经有答案了:

已关闭 10 年前。

Possible Duplicate:
jQuery .data() Not Updating DOM

我在使用 on 属性时遇到问题。我编写了一小组发送 api 调用的方法。

标记是这样的:

<div data-global-id="1318" data-action="unfollow" class="action text-as-link follow-btn btn" style="text-decoration: none;">unfollow</div>

并进行如下所示的事件捕获:

$(document).on('click','.action', function(){
  var t={};
  t.args={};
  t.args.global_id=$(this).data('global-id');
  t.global_id=t.args.global_id;
  t.action=$(this).data('action');
  t.identifier=t.action + '_v2';
  alert('here is action: ' + t.action);
  api_post_v1(t);
});

api_post_v1 正确发送调用。

有一些代码来处理回调并将标记设置为:

<div data-global-id="1318" data-action="follow" class="action text-as-link follow-btn btn" style="text-decoration: none;">follow</div>

其代码如下:

$foo=$('.action[data-action=unfollow][data-global-id='+global_id+']');
$foo.attr('data-action','follow');

关键部分是数据操作。我希望对上面的事件处理程序的调用说它是“关注”，但它说它仍然是“取消关注”。

顺序如下:

1. 加载页面，data-action='unfollow'
2. 单击此按钮，将进行 api 调用，并且您没有关注此用户；回调设置 data-action='follow'
3. 再次点击此值，数据操作将显示为“取消关注”而不是“关注”

我如何告诉 jQuery 刷新此事件的绑定(bind)？我认为这就是 $(document).on 的作用。

谢谢

Answer 1

data-* 属性和 jQuery 的 .data() 方法不可互换。使用它来获取它:

t.action = $(this).attr('data-action');

<小时/>

您似乎将 jQuery 的 data 方法与 HTML5 的 data-* 属性混合在一起。这是两件不同的事情。它们彼此交互的唯一时间是当您第一次在元素上调用 .data 时。

当您调用 .data 时，jQuery 会查找任何 data-* 属性，并将其添加到 data 集合中。但是，这只发生一次。对 .data 的后续调用将不会查看该元素的 data-* 属性。

引用the jQuery docs :

The data- attributes are pulled in the first time the data property is accessed and then are no longer accessed or mutated (all data values are then stored internally in jQuery).

<小时/>

由于您使用 .attr('data-action', 'follow') 来设置它，因此您应该使用 .attr('data-action') 得到它。

注意: $('.action[data-action=unfollow]') 不会选择设置了 action 的元素通过 jQuery 的 .data。再次强调，两者不可互换。