jQueryデータ属性の更新が機能していませんか？

Question

私は以下の2つのリンクを持っています。ユーザーは、[編集]をクリックすると、私はここでcancel-edit

<a class="btn btn-default js-edit" href="#" >Edit</a> 

<a class="btn btn-default js-cancel" href="#" data-action="cancel-add">Cancel</a> 

にキャンセルリンクのデータ-action属性を更新するこの達成するための私のスクリプトです：コンソールで

$(".container").on('click', '.js-edit', function (e) { 

    e.preventDefault(); 

    $('a.js-cancel').data('action', 'cancel-edit'); 

    console.log($('a.js-cancel').data('action')); 

}); 

、上記の結果を期待通りです。つまりコンソール表示cancel-edit

上記のアクションの後で[キャンセル]リンクをクリックすると、以下のスクリプトは機能しません。コンソールで結果を表示しても、それでも出力されるのはcancel-addですか？

$(".container").on('click', '.js-cancel', function (e) { 
    e.preventDefault(); 

    var a = $(this); 

    if (a.attr("data-action") == 'cancel-edit') { 
     // do something 
    } 

    console.log(a.attr("data-action")); 
}); 

Answer 1

DOMでdata-*属性を更新しませんdata()のjQueryの内部を使用しているためではなく、オブジェクト自体インチ

単にあなたのクリックハンドラ内で再びdata()を呼び出す：

if(a.data('action') == 'cancel-edit') 
{ 
     // do something 
} 
else 
{ 
     // do something else 
} 

Answer 2

を私はあなたの代わりに.ATTR（）beacause .prop（）あなたの最新の値を与えるの）（.prop使用することをお勧めします、