10

可能重复：
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 所做的。

谢谢

4

1 回答 1

28

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。同样，两者不可互换。

于 2012-09-04T21:08:54.990 回答