I'm working on a live ajax search like Google. But I have problems to understand the async behaviour.

I have two js scripts: Script1.js calls a php script and the response is html which includes another script2.js. Script2 is a jquery-plugin. But every time I call my jquery-plugin in my php response

$('body').my_plugin(); 

I get an error in the console, that this plugin doesn't exist.

Here's my example:

script1.js makes an asynchronous AJAX call like so:

 $.ajax({
    type: 'GET',
    url: 'my_url/search.php',                   
 }).done(function(response) {
    $('#response-div').empty().append(response);
      ...
 }).fail(function() {
      ...
 });

The php html-response looks like so:

...

<script type="text/javascript" src="js/script2.js"></script>

<script type="text/javascript">     
$(document).ready(function() {    
    $('preview-div').my_plugin();
});
    
....

When I make an synchronous AJAX call it works. When I use the getScript jQuery function in my php response it works too:

 <script type="text/javascript">     
    $(document).ready(function() {  

       $.getScript('js/sript2.js', function(jd) {
         $('preview-div').my_plugin();
       })

    });

Can someone explain the difference to me please? What is best practice for loading asynchronous content which includes it's own js-scripts?