3

Estou desenvolvendo um script que exige chamar um click() de um botão pois ele está invisível na página, no entanto o jQuery parece não retornar os atributos atualizados quando eles são alterados. Veja este exemplo:

$(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>

Como pode observar, ao testar é gerado um alert() informando os segundos atuais, mas se clicar novamente ele fica mostrando os segundos do primeiro clique, apesar do data-s ser alterado, o alert não retorna o novo segundo. Seria isso um bug do jQuery? Só consegui resolver usando this.dataset.s para que o alert funcione, gostaria de saber por que esse comportamento? E a estrutura é essa mesma, uma função dentro e outra fora do $(function(){}).

http://jsfiddle.net/6L3uxm93/

PS:

A estrutura deve seguir a que eu coloquei como exemplo, uma das funções deve estar fora do $(function(){}), isso porque a lógica do projeto requer esse tipo de organização, estou usando outras bibliotecas.

3 Respostas 3

6

O jQuery funciona de maneira imprevisível quando se mistura o setter/getter de .attr('data-xx' e .data(. Repara que o teu código funciona se usares .attr() ou .data().

Há outras perguntas que refere este problema (esta e esta). O @bfavaretto descreveu bem o problema lá:

A verificação dos atributos data- do HTML5 é na verdade um fallback. Se um valor for definido com .data(), recuperá-lo com esse mesmo método nem olha para o atributo (nem para a propriedade dataset do elemento em questão).

Ou seja, a primeira vez que corres o código o jQuery funciona como um setter e atribui o data- ao elemento. Depois não usa mais o mecanismo e quando procuras o valor com .data() "ele nem vê".

1
  • 1
    Agora sim entendi, na verdade o problema está em como o jQuery funciona ao lidar com atributos, sendo assim usarei apenas data() em ambos.
    – Paulo
    Commented 5/08/2015 às 20:02
2

O problema é o modo como você esta atualizando o data-s, utilize o método data e não 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();
})
-1

Use o atributo .data() do jQuery. Ele é o mais adequado para trabalhar com data-attr no 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();
});
2
  • 1
    Diego, como eu disse no final da pergunta, a estrutura deve seguir a que eu coloquei como exemplo, uma das funções deve estar fora do $(function(){}), isso porque a lógica do projeto requer esse tipo de organização, estou usando outras bibliotecas.
    – Paulo
    Commented 5/08/2015 às 19:40
  • 1
    Editei meu post. Commented 5/08/2015 às 19:43

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .