Changing title of div

Question

I would like to dynamically change via jQuery the title of a div.

I have the code below, but it doesn’t work. It does the post, returns the correct value. However, with the mouse on top of the div referred to, the title is not changed.

What am I doing wrong?

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

Answer 1

Don’t use the event hover. It has been removed from jQuery since version 1.9, and even if you are using a compatible version (up to 1.8), use mouseover (or mouseenter):

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

The use of hover as an event may cause unwanted effects, as stated in this document¹, and its use is not recommended, even if using a compatible version.

Another mistake, as already commented, is that the $(this) within Ajax refers to Ajax itself, not to the element that triggered the event.

With this you would have to declare a variable referencing the element outside of Ajax, for example:

var $el = $(this);

And use this variable inside Ajax:

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

You can give any name to the variable, even without the $. The use of $ before the variable is only to know that it is an object jQuery. But it could also be:

var el = $(this);

The code would stand:

$(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 Thanks to the friend help @Julio Cesar Hintze dos Santos in the comments.}

Answer 2

In the Success function, see if the this is really the object you want to change the title. If it is not, you can declare a variable just above the $.ajax, as var $el = $(this);, and within the Success function you make reference to it: $el.attr('title', resposta);