0

Gostaria de alterar dinamicamente via jQuery o title de uma div.

Estou com o código abaixo, porém não funciona. Ele faz o post, retorna o valor correto. Porém, com o mouse em cima da div referida, o title não é alterado.

O que estou fazendo de errado?

    $(document).on('hover','.buscar_detalhes',function(){
        var codigo = $(this).attr('codigo');
        $.ajax({
            type: "GET",
            data: {codigo : codigo},
            url: "buscar_detalhes.php",
            success: function(resposta){
                $(this).attr('title',resposta);
                $(this).prop('title',resposta);
            }
        });
    });

<div codigo='123' class='buscar_detalhes'>VER DETALHES</div>
2

2 Respostas 2

4

Não use o evento hover. Ele foi removido do jQuery a partir da versão 1.9, e mesmo que você esteja usando uma versão compatível (até 1.8), utilize mouseover (ou mouseenter):

$(document).on('mouseover','.buscar_detalhes',function(){...

O uso do hover como evento pode causar efeitos indesejados, segundo consta neste documento1, e seu uso não é recomendado, mesmo se estiver usando uma versão compatível.

Outro erro, como já comentado, é que o $(this) dentro do Ajax faz referência ao próprio Ajax, e não ao elemento que disparou o evento.

Com isso você teria que declarar uma variável referenciando o elemento fora do Ajax, por exemplo:

var $el = $(this);

E usar essa variável dentro do Ajax:

$el.attr('title',resposta);

Você pode dar qualquer nome à variável, até mesmo sem o $. O uso do $ antes da variável é apenas para saber que se trata de um objeto jQuery. Mas poderia ser também:

var el = $(this);

O código ficaria:

$(document).on('mouseover','.buscar_detalhes',function(){
   var $el = $(this);
   var codigo = $el.attr('codigo');
   $.ajax({
      type: "GET",
      data: {codigo : codigo},
      url: "buscar_detalhes.php",
      success: function(resposta){
         $el.attr('title',resposta);
      }
   });
});

1 Agradecimentos à ajuda do amigo @Julio Cesar Hintze dos Santos nos comentários.

6
  • De acordo com o op, o post é executado. Isso significa que a versão do jQuery dele ainda funciona o evento "hover" usando a função .on(). Na versão mais recente do jQuery isso já não é mais possível (apenas usando .hover ()). O único problema do código dele é o "this" dentro da função success mesmo Commented 22/07/2019 às 19:37
  • O jQuery usa eventos globais do JavaScript. Nenhuma documentação mostra que hover é um evento. No jQuery o .hover() é um método e não um evento.
    – Sam
    Commented 22/07/2019 às 19:42
  • Se ele diz que está fazendo o post, creio que ele esteja equivocado. :D
    – Sam
    Commented 22/07/2019 às 19:43
  • Era possível usar o pseudo-evento hover no jQuery até a versão 1.9. Na versão 1.8 ele foi depreciado e na 1.9 foi removido. Fontes: blog.jquery.com/2012/08/09/jquery-1-8-released api.jquery.com/category/version/1.9 Commented 22/07/2019 às 20:21
  • É verdade. O jQuery estava tratando o hover como evento, mas, como mostra o documento que vc me enviou no link, ele foi removido na versão 1.9 porque viram que não era uma boa rs. Valeu aí e já atualizei a resposta com essa informação.
    – Sam
    Commented 22/07/2019 às 20:31
0

Na função success, veja se o this é realmente o objeto que você quer alterar o title. Caso não seja, você pode declarar uma variável logo acima do $.ajax, como var $el = $(this);, e dentro da função success você faz referência à ela: $el.attr('title', resposta);

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 .