javascript - jquery 文本区域调整大小不能与单选按钮单击时的 jquery div 内容更改结合使用

Question

为了自动调整我的文本区域的大小，我使用:

<script>
    $(function(){
        $('.normal').autosize();
        $('.animated').autosize({append: "\n"});
    });
</script>

为了更改单选按钮上的 div 内容，我使用:

$(document).ready(function(){
    $('input[name=content_type]').on('change', function(){
        var n = $(this).val();

        if(n == 1)
        {
            $('#postform').html("<textarea class=\"animated\"></textarea>");
        }else if(n == 2)
        {
            $('#postform').html("<textarea class=\"animated\"></textarea>");
        }else if(n == 3)
        {
            $('#postform').html("<textarea class=\"animated\"></textarea>");
        }

    });
});

这是 HTML :

<form id="postform" name="post" action="phpfiles/post.php" method="POST">

    <b>Regular Post</br></br></b>

    <textarea class='animated1' name="Message" placeholder="Enter your post." maxlength="5000"></textarea>
    <input type="hidden" name="post" value="1">
    <button type="submit" class="postbutton">Click here to Post.</button>

</form>

<div class="radiobuttons">
    <div class="text"><input type='radio' name='content_type' value='1' checked />&nbsp;Text Post</div>
    <div class="text"><input type='radio' name='content_type' value='2' />&nbsp;Video or image</div>
    <div class="text"><input type='radio' name='content_type' value='3' />&nbsp;Youtube video</div>
</div>

如果我刷新页面并在 textarea 中输入一些文本，它会按预期工作，并且 textarea 的大小与文本的高度一致。现在，如果我单击 3 个单选按钮中的一个，它会更改 div 的内容，但调整大小将停止工作。

你如何解决这个问题？

Answer 1

事实上，您的 textarea 可以根据您使用的插件调整大小。您刚刚设置了autosize once 加载页面时。在使用新的 textarea 更改了 #postform 的全部内容后，您应该重新对其应用 autosize:

$('.animated').autosize({append: "\n"});