jQuery .on event.trigger在第二次单击时未刷新

Question

Hi I'm getting trouble with one strange behavior with this:

I got a link which feeds some data attributes to another link(back link of a slider)

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

and the back link code

$('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
            });
         }

First time it's ok, my data attributes are correct. When I click another link, the data attributes are changed in my html, but the console test doesn't display the changed values of $(e.currentTarget).data('currentcontainerid')

Is there a way to get the refreshed data attributes of $(e.currentTarget) ?

Thanks For all

Answer 1

Finally I've found a way by removing it with the jquery .removeData at the end of procedure :

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

Now it works like a charm ^_^ thanks for your Help

Answer 2

You are looking for dataset instead of data() . With dataset you can set and get values dinamically.

How it works?

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

I use get(0) to return the DOM object instead the jQuery object. You can make it with pure javascript:

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

More information:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset