写入data- *属性，并使用jQuery .data()进行获取 [英] Writing to a data-* attribute and getting it with jQuery .data()

问题描述

可能重复:
jQuery .data()未更新DOM

Possible Duplicate:
jQuery .data() Not Updating DOM

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

I am having a problem with using the on attribute. I have written a small set of methods to send api calls.

标记如下:

<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正确发送了呼叫.

The api_post_v1 correctly sends the call.

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

There is some code to handle the callback and it sets the markup to:

<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');

关键是数据操作.我希望上面的事件处理程序的调用说它是关注"，但它仍然是不关注".

The key piece is the data-action. I'd like the call to the event handler above to say it is 'follow' but it says it is still 'unfollow'.

顺序如下:

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

我如何告诉jQuery刷新此事件的绑定?我以为这就是$(document).on的工作.

How could I tell jQuery to refresh the bindings of this event? I thought this was what $(document).on does.

thx

推荐答案

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

The data-* attributes & jQuery's .data() method are not interchangeable. Use this to get it:

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

---

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

---

You seem to be mixing jQuery's data method with HTML5's data-* attributes. These are two different things. The only time they interact with one another is when you first call .data on an element.

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

When you make a call to .data, jQuery looks for any data-* attributes, and adds it to the data collection. However, this only happens once. Subsequent calls to .data will not look at the element's data-* attributes.

引用 jQuery文档:

data-属性在第一次访问数据属性时被拉出，然后不再被访问或变异(然后所有数据值都存储在jQuery内部).

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')进行获取.

---

Since you're using .attr('data-action', 'follow') to set it, you should use .attr('data-action') to get it.

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

Note: $('.action[data-action=unfollow]') will not select an element that had the action set via jQuery's .data. Again, the two are not interchangeable.

这篇关于写入data- *属性，并使用jQuery .data()进行获取的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！