Question

我试图实现这一点：https://github.com/jackmoore/autosize/tree/v1

当我在html页面上添加textarea时，它按预期工作，但如果我动态创建textarea，它不会按预期工作。您可以点击＆＃34;新评论＆＃34;并测试它。

这是我的小提琴。 http://jsfiddle.net/hcxgqhae/6/

HTML

<!-- REGULAR TEXTAREA, it 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 this is a 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 this is a test comment and this comment is particularly very long and it goes on and on and 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 this is a 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>');
    }));
});

Answer 1

你需要自动调整新的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` the new textarea
        autosize(li.find("textarea"));
    }));
});

jQuery添加动态自动调整textarea

1 个答案: