javascript - jquery not working after resize div onclick

Question

Here is a jquery to auto resize text according to #outer div width and height okay. If i change #outer div width and height manually before render HTML then its fitting text (auto resizing text) properly to #outer div. Just Like see in Example 1 and Example 2 its fitting text.

Example-1

 $.fn.fitInText = function() {
  this.each(function() {

    let textbox = $(this);
    let textboxNode = this;

    let mutationCallback = function(mutationsList, observer) {
      if (observer) {
        observer.disconnect();
      }
      textbox.css('font-size', 0);
      let desiredHeight = textbox.css('height');
      for (i = 12; i < 50; i++) {
        textbox.css('font-size', i);
        if (textbox.css('height') > desiredHeight) {
          textbox.css('font-size', i - 1);
          break;
        }
      }

      var config = {
        attributes: true,
        childList: true,
        subtree: true,
        characterData: true
      };
      let newobserver = new MutationObserver(mutationCallback);
      newobserver.observe(textboxNode, config);

    };

    mutationCallback();

  });
}

$('#inner').fitInText();

#outer {
  display: table;
  width: 500px;
   height: 300px;
   transition: width 1s;
}

#inner {
  border: 1px solid black;
  height: 170px;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  word-break: break-all;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    
<div id="outer">
  <div id="inner" contenteditable=true>
          We think the Spirit working through the Word, not an expert at the head of the classroom, is essential to discipleship. When we begin here we learn “how to think biblically”. Our focus is less on answering questions you don’t have and more on helping you learn how to find the answers within thes is less on answering questions you don’t have and mos is less on answering questions you don’t have and more on helping you learn how to find the answers within the Bible. We must seek Jesus in the Bible, trusting that God has the answers. This means learning patichurch leadership, but we are available to supply coaches to be to answer questions or suggest next areas to study based on their questions.

  </div>
</div>

question from:https://stackoverflow.com/questions/65929391/jquery-not-working-after-resize-div-onclick

Answer 1

I removed the font resizing script and changed the font size instead with transition when changing the length and width

this code

#outer {
   display: table;
   width: 500px;
   height: 300px;
   transition: all 1s;
}

#outer.newouter {
   display: table;
   width: 700px;
   height: 400px;
}

I changed it with this code

#outer {
  display: table;
  width: 500px;
  height: 300px;
  font-size: 18px;
  transition: all 1.5s;
}

#outer.newouter {
   display: table;
   width: 700px;
   height: 400px;
   font-size: 48px;
}

complete code:

    //Jquery for change outer div width
    $('.newsize').on('click', function() {
        $('#outer').toggleClass('newouter');
    });

    #outer {
      display: table;
      width: 500px;
      height: 300px;
      
       font-size: 18px;
       transition: all 1.5s;
    }

    #outer.newouter {
      display: table;
      width: 700px;
      height: 400px;
       font-size: 48px;
    }

    #inner {
      border: 1px solid black;
      height: 170px;
      text-align: center;
      display: table-cell;
      vertical-align: middle;
      word-break: break-all;
    }

    <script src="code.jquery.com/jquery-1.9.1.js"></script>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        
        <button class="newsize"> Change Width Height </button>
        
    <div id="outer">
      <div id="inner" contenteditable=true>
              We think the Spirit working through the Word, not an expert at the head of the classroom, is essential to discipleship. When we begin here we learn “how to think biblically”. Our focus is less on answering questions you don’t have and more on helping you learn how to find the answers within thes is less on answering questions you don’t have and mos is less on answering questions you don’t have and more on helping you learn how to find the answers within the Bible. We must seek Jesus in the Bible, trusting that God has the answers. This means learning patichurch leadership, but we are available to supply coaches to be to answer questions or suggest next areas to study based on their questions.

      </div>
    </div>