jquery - Data autorize attribute not working inside javascript append -
if can me please stuck this, need autoresize height of textarea , working well, in blade part of laravel
<textarea data-autoresize rows="1" type="text" class="form-control inline-block textfield"></textarea> and javascript part
<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> but have javascript part
var = 1; $(document).ready(function () { $('#add_field').click(function () { i++; $('.optionsform').append('<div id="textfield' + + '" class="col-md-6 min-height-60 textfield"><textarea data-autoresize rows="1" type="text" id="textfield" name="question_text' + + '" value="{{ old('options') }}" class="form-control inline-block textfield" placeholder="@lang('general.textfield') ' + + '"></textarea>@if($errors->has('options. + + '))<span class="help-block"><strong>{{ $errors->first('options. + + ') }}</strong></span>@endif<button type="button" value="' + + '" 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>'); }); and here data-autoresize not working think, because not autoresizing, can please help, thank you.
jquery event handlers attached dom elements exist @ time dom loaded. adding new textareas after dom has loaded, event handlers aren't attached them, , don't run.
you need delegate handler exists @ time of page load. jquery docs describe this, see "direct , delegated events" section.
you need restructure code bit, think. not sure why need iterate on each textarea, instead of assigning 1 keyup event? try following:
updated there few typos.
// attach event handler on body, exist @ load, , filter // (you use other element textareas inside, // exists @ time page loads) jquery('body').on('keyup input', 'textarea[data-autoresize]', function(e) { resizetextarea(jquery(e.target)); }); // single function handle keyup resizes. function resizetextarea($textarea) { var offset = $textarea.offsetheight - $textarea.clientheight; $textarea.css('height', 'auto').css('height', el.scrollheight + offset).removeattr('data-autoresize'); };
Comments
Post a Comment