Q:

data attribute not updated before page refresh with jQuery

In my project I have a table, each of its rows holding id and title as data attributes
<tr data-id="1" data-title="title"><td id="td_title">some text</td></tr>

I use jQuery to update the data-tile attribute
$newTitle = 'newTitle';
$row_to_update = $("tr").find("[data-id='1']");
$row_to_update.attr('data-title', newTitle );

So after that, in  the html I can see the updated values, but if I try this:
$var = $row_to_update.data('title');
alert($var);

It returns the old title, unless I load the page again.
I suppose I have to clear the cache, but I only found $.domCache, which is not applicable to jQuery and also saw and tried
function clearjQueryCache(){
    for (var x in jQuery.cache){
        delete jQuery.cache[x];
    }
}

but obviously not correct, as everything stopped working

A:

.find() method allows us to search through the descendants of these
  elements in the DOM tree and construct a new jQuery object from the
  matching elements. The .find() and .children() methods are similar,
  except that the latter only travels a single level down the DOM tree.

ًWith $("tr").find("[data-id='1']"); tr doesn't have  element with [data-id='1'] to find it .. So no need to use .find() 
$newTitle = 'newTitle';
$row_to_update = $("tr[data-id='1']");
$row_to_update.data('title', $newTitle );
//then
$var = $row_to_update.data('title');
alert($var);  // the output should be newTitle

Working demo

$(document).ready(function(){
  $newTitle = 'newTitle';
  $row_to_update = $("tr[data-id='1']");
  $row_to_update.data('title', $newTitle );
  //then
  $var = $row_to_update.data('title');
  alert($var);  // the output should be newTitle
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr data-id="1" data-title="title"><td id="td_title">some text</td></tr>
<tr data-id="2" data-title="title"><td id="td_title">some text</td></tr>
</table>

