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

Question

可能重复:
jQuery .data()不更新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刷新这个事件的绑定？我认为这就是$(document).on的作用.

谢谢

Answer 1

该data-*属性与jQuery的.data()方法是不能互换的.使用它来获取它:

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

您似乎将jQuery的data方法与HTML5的data-*属性混合在一起.这是两件不同的事情.他们彼此互动的唯一时间是你第一次打电话.data给一个元素.

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

引用jQuery文档:

的data-属性在第一次拉动数据属性被访问,然后不再访问或突变的(所有数据值然后被存储在内部的jQuery).

既然您正在.attr('data-action', 'follow')设置它,那么您应该使用.attr('data-action')它来获取它.

注意: $('.action[data-action=unfollow]')不会action通过jQuery 选择具有该集合的元素.data.同样,这两者不可互换.