.trigger() not triggering autosize event

Question

Hi I have a project using autosize text fields, these field need to be updated using an 'autosize:update' trigger if the field is edited by a script, but I'm having some trouble getting this to work. If I try entering:

$('.auto-size').trigger('autosize:update')

Into the console when the update needs to happen, nothing happens and I'm not sure why?

I'm pretty new to javascript/jquery so any help would be greatly appreciated.

Answer 1

As reported in the documentation you can use:

autosize.update($('.auto-size'));

or you can use:

   var evt = document.createEvent('Event');
   evt.initEvent('autosize:update', true, false);
   $('.auto-size').get(0).dispatchEvent(evt);

An example:

// initialiaze the field
autosize($('.auto-size'));


// add new text to textarea and update!
$('#myBtn').on('click', function(e) {
  var ele = $('.auto-size');
  ele.text(ele.text() + 'This is a new line.\n');

  autosize.update(ele);
  
  // Dispatch a 'autosize:update' event to trigger a resize:
  //var evt = document.createEvent('Event');
  //evt.initEvent('autosize:update', true, false);
  //$('.auto-size').get(0).dispatchEvent(evt);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/jackmoore/autosize/master/dist/autosize.min.js"></script>


<textarea class="auto-size"></textarea>

<button id="myBtn">Click Me</button>