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

datajQuery のメソッドと HTML5 のdata-*属性を混在させているようです。これらは2つの異なるものです。それらが互いに相互作用するのは、最初.dataに要素を呼び出したときだけです。

を呼び出すと.data、jQuery は属性を検索し、それをコレクションdata-*に追加します。dataただし、これは 1 回だけです。以降の の呼び出しでは、要素の属性.dataは確認されません。data-*

jQuery docsを引用するには：

属性は、data-data プロパティが最初にアクセスされたときに取得され、それ以降はアクセスまたは変更されません (その後、すべてのデータ値が jQuery に内部的に保存されます)。

設定するために使用し.attr('data-action', 'follow')ているので、取得するために使用.attr('data-action')する必要があります。

注: jQuery$('.action[data-action=unfollow]')の. 繰り返しますが、この 2 つは互換性がありません。action.data

于 2012-09-04T21:08:54.990 に答える