调整 div onclick 大小后 jquery 不工作

如何解决调整 div onclick 大小后 jquery 不工作

这是一个根据 #outer div 宽度和高度自动调整文本大小的 jquery。如果我在渲染 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,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,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 #outer 按钮更改 onclick div 的宽度和高度比例，那么它不会再次更改文本字体大小并且不会使文本适合 div。

意味着我想通过 #outer 更改 button div 的宽度和高度，然后它应该可以正常工作，就像参见示例 3，虽然我将 onclick="fitInText()" 添加到按钮。 .我想使用示例 3 的情况。

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

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

    let textBox = $(this);
    let textBoxNode = this;

    let mutationCallback = function(mutationsList,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,but we are available to supply coaches to be to answer questions or suggest next areas to study based on their questions.

  </div>
</div>

解决方法

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

此代码

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