Jquery .on event.trigger 在第二次点击时没有刷新答案

【问题标题】：Jquery .on event.trigger not refreshed on second clickJquery .on event.trigger 在第二次点击时没有刷新
【发布时间】：2016-01-15 13:41:41
【问题描述】：

您好，我遇到了一种奇怪的行为：

我有一个链接，它将一些数据属性提供给另一个链接（滑块的反向链接）

<div class="col-sm-4 etapes etape1 btn-back"
     data-classtarget="row_containerHover" 
     data-currentcontainerid="row_containerHover2"></div>

和反向链接代码

$('body').on('click touchstart', '.btn-back', function (e) {
        //$('.btn-back').on('click touchstart', function (e) {

            //console.log('click btn-back');//test ok
            //var container = $(e.target).closest('.slide_containerHover');
            var container = $("#"+$(e.currentTarget).data('currentcontainerid'));
            console.log("current container : "+container.attr("id"));

            var container_class_target = $(e.target).data("classtarget");
            var prev_container = $("#"+container_class_target);
            console.log("prev container : "+prev_container.attr("id"));

            //On récup le niveau du container ds l'arborescence
            /*var level_container = container.data('level');
            var prev_level = parseInt(level_container - 1);*/
            //On récup le container précédent


            var decalX = parseInt(parseInt($(window).outerWidth() / 2) 
                       + parseInt(container.outerWidth() / 2));

            console.log("ledecalX : "+decalX);//test

            container.animate({
                left: "+=" + decalX
            }, 500, 'easeInOutQuad');

            //console.log('row_containerHover outerWidth : '+decalX);//test
            setTimeout(function () {
                prev_container.animate({
                    left: "0px"
                }, 500, 'easeInOutQuad'), 100
            });
         }

第一次没问题，我的数据属性是正确的。当我点击另一个链接时，我的html中的数据属性发生了变化，但是控制台测试没有显示$(e.currentTarget).data('currentcontainerid')的变化值

有没有办法获取$(e.currentTarget)的刷新数据属性？

谢谢大家

【问题讨论】：

Ya data() 对象仅在解析 DOM 时才链接到数据属性。之后不会反映对 data-* 属性的任何更新。改用attr() 方法
你是如何改变数据属性的？
像这样：$(selector).attr('data-classTarget',container.attr("id"));

标签： javascript jquery

【解决方案1】：

最后我找到了一种方法，在程序结束时使用 jquery .removeData 将其删除：

 $(e.currentTarget).removeData('classTarget');
 $(e.currentTarget).removeData('currentcontainerid');

现在它就像一个魅力 ^_^ 感谢您的帮助

【讨论】：

【解决方案2】：

您正在寻找dataset 而不是data()。使用dataset，您可以动态设置和获取值。

它是如何工作的？

 $(selector).get(0).dataset.currentcontainerid; // returns data-currentcontainerid value
 $(selector).get(0).dataset.currentcontainerid = "new value"; // set the new value

我使用get(0) 返回 DOM 对象而不是 jQuery 对象。您可以使用纯 javascript 制作它：

 document.getElementById("element").dataset.currentcontainerid = "new value"; // set the new value

【讨论】：