Strange behavior when displaying an attribute using click();

Question

I’m developing a script that requires calling a click() from a button as it is invisible on the page, however jQuery does not seem to return the updated attributes when they are changed. Take this example:

$(function(){
    $('.hidden').on('click', function(){
        console.log($(this).data('s'));
        alert($(this).data('s')); 
    });
});
    
$('.visivel').on('click', function(){
    var d = new Date();
    var s = d.getSeconds();
    $('.hidden').attr('data-s', s).click();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class='visivel'>Clique me</button>
<button class='hidden' data-s='' style='display:none;'>Invisivel</button>

As you can see, testing generates a alert() informing the current seconds, but if you click again it keeps showing the seconds of the first click, despite the data-s be amended, the alert does not return the new second. Could this be a jQuery bug? I could only solve using this.dataset.s so that the alert work, would you like to know why this behavior? And the structure is the same, a function inside and outside the $(function(){}).

http://jsfiddle.net/6L3uxm93/

PS:

The structure must follow what I have set as an example, one of the functions must be out of $(Function(){}), because the logic of project requires this type of organization, I am using other libraries.

Answer 1

jQuery works unpredictably when mixing the Setter/Getter .attr('data-xx' and .data(. Notice that your code works if you use only .attr() or only .data().

There are other questions that refer to this problem (this and this). @bfavaretto described the problem there well:

Checking the HTML5 date attributes is actually a fallback. If a value is set with . date(), retrieve it with the same method, nor look at the attribute (nor at the dataset property of the element in question).

That is, the first time you run the code jQuery works as a Setter and assigns the data- element. Then no longer use the mechanism and when you search for the value with .data() "he doesn’t even see".

Answer 2

The problem is the way you are updating the data-s, use the method data and not attr

$(function(){
    $('.hidden').on('click', function(){
        console.log($(this).data('s'));
        alert($(this).data('s')); 
    });
});

$('.visivel').on('click', function(){
    var d = new Date();
    var s = d.getSeconds();
    $('.hidden').data('s', s).click();
})

Answer 3

Use the attribute .data() jQuery. It is the most suitable to work with data-attr in HTML.

$(function(){
    $('.hidden').on('click', function(){
        console.log($(this).data('s'));
        alert($(this).data('s')); 
    });
});

$('.visivel').on('click', function(){
    var d = new Date();
    var s = d.getSeconds();
    $('.hidden').data('s', s).click();
});