单击时的动态textarea大小

Question

我目前正在使用X-Editable来设置文字输入区域。使用X-Editable，您可以选择静态textarea大小。我试图让这种动态变化，因为有些区域只是一个词，但其他区域是段落。我已经能够在“keyup”上自动调整文本区域的大小，但是在创建textarea时却没有。任何帮助将不胜感激。

这是我的HTML：

<div id="recharge-info">
 <div class="tab-content">
  <div class="tab-pane active" id="general-tab">
   <div class="container-fluid">
    <div id="general-info" class="info-tabs">
      <p>Name: <span id="recharge-name" class="info general edit"></span></p>
      <p>Department: <span id="recharge-dept" class="info general edit"></span></p>
      <p>Category: <span id="recharge-cat" class="info general edit"></span></p>
      <p>Location: <span id="recharge-loc" class="info general edit"></span></p>
      <p>Status: <span id="recharge-status" class="info general edit"></span></p>
     </div>
    </div>
   </div>
  </div>
 </div>

这是JS：

//This is the part im having trouble with. When clicking on the 'p' to create the textarea, it is not creating the text area the right size.
$('#recharge-info p').on( 'click', function (e){
    $('#recharge-info textarea').css('height', 'auto' );
    $('#recharge-info textarea').height( $('#recharge-info textarea').prop('scrollHeight') );
    console.log($('#recharge-info textarea').prop('scrollHeight'));
});

//This part, on keyup works no problem. When im in the text area and type, it auto resizes correctly and works great.
$('#recharge-info').on( 'keyup', 'textarea', function (e){
    $(this).css('height', 'auto' );
    $(this).height( this.scrollHeight );
});
$('#recharge-info').find( 'textarea' ).keyup();

非常感谢任何帮助。提前致谢