html of span.label should change automatically whenever value of attribute attr('title') changes

Question

I have html

<div class="save-ad-btn">
<a class="fi_make_favorite" title="Make favorite">xyz
</a>
<span class="label">Favorited</span>
</div>

and javascript

$('.save-ad-btn').find('span.label').text($(this).find('a.fi_make_favorite').attr('title'));

It works perfectly but I want whenever value of attribute attr('title') changes the html of span.label should change automatically.

Answer 1

Put the code in a function and call it on load and where you change the title

function copyTitle() {
  $('.save-ad-btn').each(function() {
    $(this).find('span.label').text(
      $(this).find('a.fi_make_favorite').attr('title')
    );
  });  
}

$(function() {
  copyTitle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="save-ad-btn">
  <a class="fi_make_favorite" title="Make favorite">xyz
    </a>
  <span class="label">Favorited</span>
</div>

Also look here: Detecting attribute change of value of an attribute I made