Question

可能重复：
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');

关键是数据动作。我希望上面的事件处理程序的调用说它是'跟随'但它说它仍然是'取消关注'。

序列如下：

加载页面，data-action ='unfollow'
点击此按钮，即可拨打api电话并且您没有关注此用户;回调设置data-action ='follow'
再次点击此值，数据操作将回显为“取消关注”而不是“关注”

我怎么能告诉jQuery刷新这个事件的绑定？我认为这就是$（文件）.on所做的。

THX

Answer 1

data-*属性＆amp; jQuery的.data()方法不可以互换。用它来获取它：

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

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

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

引用the jQuery docs：

第一次访问数据属性时会拉出data-属性，然后不再访问或变异（所有数据值都会在内部存储在jQuery中）。

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

注意： $('.action[data-action=unfollow]')不会选择通过jQuery的action设置.data的元素。同样，这两个不可以互换。

写入data- *属性并使用jQuery .data（）获取它

1 个答案: