jQuery in ajax content

Question

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(/\n/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

Can you please redirect me to the duplicate please, I have searched, but no luck :( — Juel, Feb 05 '15 at 07:08

Milind Anantwar · Accepted Answer · 2015-02-04T14:53:25.793

0

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

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

edited Feb 04 '15 at 14:53

answered Feb 04 '15 at 14:25

Milind Anantwar

81,290
25
94
125

Hi Milind :)Thanks, but that dont Work either, the most frustrating thing is that even firebug dont give me an error :/ – Juel Feb 04 '15 at 14:47
is this event getting called. try putting alert inside to test. – Milind Anantwar Feb 04 '15 at 14:50
alert('Jubiiiiii'); dont give me anything either, so the event is not being called i guess.. But why? – Juel Feb 04 '15 at 14:52
do you have same ids for multiple textarea – Milind Anantwar Feb 04 '15 at 14:53
No its the only input ID i have at all.. – Juel Feb 04 '15 at 14:59
well this should work then. – Milind Anantwar Feb 04 '15 at 15:05
I have put the script into the Ajax called content, and then it Works :D Thanks a lot Milind :) – Juel Feb 05 '15 at 07:20
@Juel: glad it helps juel :) – Milind Anantwar Feb 05 '15 at 07:23

jQuery in ajax content

1 Answers1