jQuery在ajax内容中[重复]

This question already has answers here:

                </div>
            </div>
                    <div class="grid--cell mb0 mt4">
                        <a href="/questions/203198/event-binding-on-dynamically-created-elements" dir="ltr">Event binding on dynamically created elements?</a>
                            <span class="question-originals-answer-count">
                                (23 answers)
                            </span>
                    </div>
            <div class="grid--cell mb0 mt8">Closed <span title="2015-02-04 14:26:31Z" class="relativetime">5 years ago</span>.</div>
        </div>
    </aside>

I have this page:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>test</title>
  <script src="jquery-2.1.1.min.js"></script>
  <script language="javascript" src="ajax.js"></script>
  <script>
    $(document).ready(function() {
      $('#input').keyup(function() {
        $('#output').html($(this).val().replace(/
/g,'<br/>')); 
      });
    });
  </script>
</head>

<?php
ini_set("display_errors","On"); 
    echo "<div id=\"UpdateArea\">";
        echo "<input type=\"button\" value=\"type here\" onClick=\"ShowPage()\">";
    echo "</div>";
}

?>
</html>

And when I push the button it loads this into the UpdateArea Div:

<?php

echo "<textarea id=\"input\" rows=\"10\" cols=\"50\" class=\"textarea\"></textarea><br><br><br>";

echo "<div id=\"output\"></div>";

?>

But the jQuery wont Work on the Ajax loaded contents :/ So the input won't show up ind the output div.. Why is that?, I'm new to jQuery, so it might be a obvious problem. I would really appreciate some help :)

The Jquery Works fine if I include the script a jQuery on a page for it self and load it.

Kind regards Juel

</div>

You need to use event delegation for attaching events to dynamically added elements:

$(document).on('keyup','#input',function() {
   $('#output').html($(this).val().replace(/
/g,'<br/>')); 
});