Question

如果有人可以帮助我，请我坚持这一点，我需要自动调整textarea的高度并且它工作得很好，在laravel的刀片部分

<textarea  data-autoresize rows="1" type="text"  class="form-control inline-block textfield"></textarea>

和javascript部分

   <script type="text/javascript">
        jQuery.each(jQuery('textarea[data-autoresize]'), function() {
        var offset = this.offsetHeight - this.clientHeight;
        var resizeTextarea = function(el) {
            jQuery(el).css('height', 'auto').css('height', el.scrollHeight + offset);
        };
        jQuery(this).on('keyup input', function() { resizeTextarea(this); }).removeAttr('data-autoresize');
    });
    </script>

但我也有这个javascript部分

var i = 1;
$(document).ready(function () {
    $('#add_field').click(function () {
    i++;
    $('.optionsForm').append('<div id="textfield' + i + '" class="col-md-6 min-height-60 textfield"><textarea data-autoresize rows="1" type="text" id="textfield" name="question_text' + i + '" value="{{ old('options') }}" class="form-control inline-block textfield" placeholder="@lang('general.textfield') ' + i + '"></textarea>@if($errors->has('options. + i + '))<span class="help-block"><strong>{{ $errors->first('options. + i + ') }}</strong></span>@endif<button type="button" value="' + i + '" class="btn btn-flat btn-default btn-sm inline-block d-button d-textfield" id="delete_textfield" title="@lang('general.remove_option')"><i class="fa fa-trash-o" aria-hidden="true"></i></button></div>');
        });

这里数据自动调整不起作用我认为，因为它不是自动调整，任何人都可以帮助，谢谢。

Answer 1

jQuery事件处理程序附加到DOM加载时存在的DOM元素。在加载DOM之后，您将添加新的textarea，因此您的事件处理程序不会附加到它们，并且它们不会运行。

您需要将处理程序委托给页面加载时存在的内容。 jQuery docs describe this，请参阅“直接和委派活动”部分。

我认为你还需要对代码进行一些重构。我不确定为什么你需要迭代每个textarea，而不是只分配一个keyup事件？请尝试以下方法：

更新有一些错别字。

// Attach an event handler on body, which will exist at load, and filter it
// (you could use any other element that all your textareas will be inside, that
// exists at the time the page loads)
jQuery('body').on('keyup input', 'textarea[data-autoresize]', function(e) { 
    resizeTextarea(jQuery(e.target));
});

// Single function to handle keyup resizes.
function resizeTextarea($textarea) {
    var offset = $textarea.offsetHeight - $textarea.clientHeight;
    $textarea.css('height', 'auto').css('height', el.scrollHeight + offset).removeAttr('data-autoresize');
};

数据自动调整属性在javascript追加中不起作用

1 个答案: