Dom-ready event after replaceWith

Question

1. I add textareas to html-page by replacing a number of divs with .replaceWith() JQuery method.

2. I would like to make my textareas autogrow as user types there.

The problem is that autogrow library I use works only on dom-ready and thus I cannot apply my autogrow library to my textareas as they are generated dynamically.

Is there any kind of event after my divs are replaced with textareas that I can use to apply my autogrow library?

Answer 1

You have to use event handlers to capture changes to your textareas (even if they're generated dynamically), eg.

jQuery(function($){
    // dom ready
    $("body").on("input propertychange","textarea",function(event) {
        // here goes your autogrow code
    });
});

See it on action in JSFiddle

or here

jQuery(function($) {
  // dom ready
  $("body").on("input propertychange", "textarea", function(event) {
    // here goes your autogrow code
    alert("changed");
  });

  $("#addTextArea").click(function(ev) {
    $("#textareas").append("<br/><textarea></textarea>");
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="textareas">
  <textarea></textarea>
</div>
<button id="addTextArea">Add textarea</button>