jquery在调整div onclick后不起作用

Question

这是一个 jquery，可以根据#outer div 的宽度和高度自动调整文本大小。如果我在渲染 HTML 之前手动更改#outer div 的宽度和高度，那么其合适的文本（自动调整文本大小）正确地更改为#outer div。就像在示例 1 和示例 2 中看到它的合适文本一样。

示例 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>

Example-2 增加了#outer div 的宽度和高度，它仍然可以将文本放入#outer

 $.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: 700px;
   height: 400px;
   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>

但是，如果我从 Jquery onclick 按钮更改 #outer div 的宽度和高度比，那么它不会再次更改文本字体大小并且不适合 div 的文本。

意味着我想通过button 更改#outer div 的宽度和高度，那么它应该可以正常工作，如示例3 所示，尽管我在按钮上添加了onclick="fitInText()"。 .我想用 示例 3 的情况来解决它。

点击按钮后，只需在#outer div 内容中添加任何字母、空格并查看魔法。

$.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();



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

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

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

#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" onclick="fitInText()"> 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>

Answer 1

我删除了字体调整脚本并在更改长度和宽度时使用过渡更改了字体大小

这段代码

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

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

我用这段代码改变了它

#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;
}

完整代码：

    //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>