jqueryで動的に入れ替えたdata属性の値でイベントが発火しない

Question

Mac 10.14.1
chrome最新　（デベロッパーツール環境）　

hammer.jsを使用してダブルタップを検知しています。
リロード後最初のタップでは
console.log(flag)は０になります。

動的にdata-flagを1に入れ替えた後、もう一度タップすると、
console.log(flag)は０になります。

タップするたびに切り替わるようにしたいのですが、どのようにするのが正しい動作になりますでしょうか

HTML側

<script type='text/javascript' src='/js/jquery.min.js'></script>
<script type='text/javascript' src='/js/hammer.js'></script>
<script type='text/javascript' src='/js/jquery.hammer.js'></script>
<script type='text/javascript' src='/js/test.js'></script>

<div class='push' data-flag='0'>押す</div>

test.js

$(document).hammer().on('doubletap','.push',function(){
    var item=$(this);
    var flag=item.data('flag');

    console.log(flag);

    if(flag==1){
　　　　　　item.attr('data-flag',0);
    }else{
　　　　　　item.attr('data-flag',1);
    }
})

Comments

[x_x]

jQueryのバージョンはいくつでしょうか？

Answer 1

おそらく想定通りのものではないので、jQueryの.data()は使わないほうがいいかもしれません。

var item = $('.push');
item.data('flag'); // 0
typeof item.data('flag'); // "number"
item[0].dataset['flag']; // "0"
typeof item[0].dataset['flag']; // "string"

item.attr('data-flag', 1);
item.data('flag'); // 0
item[0].dataset['flag']; // "1"

item.data('flag', 2);
item.data('flag'); // 2
item[0].dataset['flag']; // "1"

item[0].dataset['flag'] = '3';
item.data('flag'); // 2
item[0].dataset['flag']; // "3"

Answer 2

<script>
$(function(){
  $('#hoge').on('click',function(){
    var flag=$('#hoge').data('flag');
    console.log(flag);
    $('#hoge').data('flag',flag?0:1);
  });
});
</script>
<div id="hoge" data-flag="1">hoge</div>

Answer 3

これでどうでしょう。

var flag=item.attr('data-flag');

【jQueryのカスタムデータ属性(data-*)の設定/取得の挙動が思ったのと違った件 - Qiita】
https://qiita.com/Kta-M/items/2eda39750abd10df9801

【jQueryのdata()で属性を取得・設定・変更する方法まとめ！ | 侍エンジニア塾ブログ | プログラミング入門者向け学習情報サイト】
https://www.sejuku.net/blog/38263

Comments

[u-sukesan]

ありがとうございました。
正常に動作しました。