jQuery adding dynamically autosize textarea -

i'm trying implement : https://github.com/jackmoore/autosize/tree/v1

it works expected when add textarea on html page, doesn't work expected if create textarea dynamically. can click "new comment" , test it.

here's fiddle. http://jsfiddle.net/hcxgqhae/6/

html

<!-- regular textarea, works --> <textarea></textarea> <br> <button type="button" class="btn btn-success new-comment">new comment</button> <div class="detailbox">     <div class="actionbox">         <ul class="commentlist">             <li>                 <div class="commenterimage">                     <img src="http://lorempixel.com/50/50/people/6" />                 </div>                 <div class="commenttext">                     <p class="">hello test comment.</p> <span class="date sub-text">on march 5th, 2014</span>  <span class="getsocial"><a href="">like</a></span>  <span class="getsocial"><a href="">comment</a></span>  <span class="getsocial"><a href="">share</a></span>                  </div>             </li>             <li>                 <div class="commenterimage">                     <img src="http://lorempixel.com/50/50/people/7" />                 </div>                 <div class="commenttext">                     <p class="">hello test comment , comment particularly long , goes on , on , on.</p> <span class="date sub-text">on march 5th, 2014</span>                      </div>                 </li>                 <li>                     <div class="commenterimage">                         <img src="http://lorempixel.com/50/50/people/9" />                     </div>                     <div class="commenttext">                         <p class="">hello test comment.</p> <span class="date sub-text">on march 5th, 2014</span>                      </div>                 </li>             </ul>         </div>     </div>     <script>         autosize(document.queryselectorall('textarea'));     </script> 

css

.detailbox {     border: 1px solid #bbb; } .titlebox {     background-color: #fdfdfd;     padding: 10px; } .titlebox label {     color: #444;     margin: 0;     display: inline-block; } .commentbox {     padding: 10px; } .commentbox .form-group:first-child, .actionbox .form-group:first-child {     width: 80%; } .commentbox .form-group:nth-child(2), .actionbox .form-group:nth-child(2) {     width: 18%; } .actionbox .form-group * {     width: 100%; } .taskdescription {     margin-top: 10px 0; } .commentlist {     padding: 0;     list-style: none; } .commentlist li {     margin: 0;     margin-top: 10px; } .commentlist li > div {     display: table-cell; } .commenterimage {     width: 30px;     margin-right: 5px;     height: 100%; } .commenterimage img {     width: 100%;     border-radius: 50%; } .commenttext p {     margin: 0; } .sub-text {     color: #aaa;     font-family: verdana;     font-size: 11px; } .actionbox {     padding: 10px; } .commenttext p {     margin-left: 0.2em;     font-size: 0.9em; } 

jquery

$(document).ready(function () {     $('.new-comment').one('click', (function () {         $('.commentlist li:last').after('<li> ' +             '<div class="commenterimage"> ' +             '<img src="http://lorempixel.com/50/50/people/6"/> ' +             '</div> ' +             '<div class="commenttext"> ' +             '<p class=""><textarea></textarea></p> ' +             '</div> ' +             '</li>');     })); }); 

you need autosize new textarea

$(document).ready(function () {     $('.new-comment').one('click', (function () {         var li = $('<li> ' +             '<div class="commenterimage"> ' +             '<img src="http://lorempixel.com/50/50/people/6"/> ' +             '</div> ' +             '<div class="commenttext"> ' +             '<p class=""><textarea></textarea></p> ' +             '</div> ' +             '</li>');          $('.commentlist li:last').after(li);          // `autosize` new textarea         autosize(li.find("textarea"));     })); });