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

Popular posts from this blog

Sort a complex associative array in PHP -

vb.net - How to ignore if a cell is empty nothing -

recursion - Can every recursive algorithm be improved with dynamic programming? -