Jquery .on event.trigger not refreshed on second click

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

Ya `data()` object is just linked to data attribute only when DOM is parsed. Any update to data-* attribute isn't reflected after that. Use `attr()` method instead — A. Wolff, Jan 15 '16 at 13:47
like this : $(selector).attr('data-classTarget',container.attr("id")); — Eloise85, Jan 15 '16 at 14:58

Eloise85 · Answer 1 · 2016-01-15T22:49:28.377

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

edited Jan 15 '16 at 22:49

answered Jan 15 '16 at 15:02

Eloise85

648
1
6
26

score 0 · Answer 2 · answered Jan 15 '16 at 13:52

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

Jquery .on event.trigger not refreshed on second click

2 Answers2

How it works?