Script does not work for content async added to page

Script does not work for content async added to page

I have spent a lot of time googling about this but I'm not sure exactly what to search for. I use jquery ajax to send a request to the server and then new content for a specific div is returned that the script then places in that div. All links with the css class "link" triggers this request.

The problem is that the returned content contains links with the css class "link" and they will not trigger the request. I'm guessing this has something to with that the script does not know about these new links that were added. Because the script runs when the page loads and only knows about the links that were on the original page.

How can I make the script ready for the new ones that are async added into the page?

  1. <script type="text/javascript">
  2.     $(".link").click(function () {
  3.         $.ajax({
  4.             url: $(this).attr("href"),
  5.             type: "PUT",
  6.             success: function (data) { $("#links").html(data); }
  7.         });
  8.         return false;
  9.     });
  10. </script>

The script ^