Executing event functions on load

Executing event functions on load

New to jQuery and have some issues with the code below, guess it is simple but I fail to see why slideToggle() and xhttp request is executed on load without click- or selectionchange-event. Why? 

  1. <!DOCTYPE html>

    <html>

    <head lang="en">

    <meta charset="UTF-8">

    <meta name=viewport content="width=device-width,initial-scale=1">

    <title>Title</title>

    <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>


    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">


      <!-- BOOTSTRAP-->

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


        <!-- MAGICSUGGEST -->

        <link href="css/magicsuggest.css" rel="stylesheet">

    <script src="js/magicsuggest-min.js"></script> 

    <!-- DATATABLES -->

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">

    <script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.13/js/jquery.dataTables.js"></script>

    <style type="text/css">

    .alert {margin: 20px 0 0 0;}

    </style>

    <script>

        $(document).ready(function(){

        $('#example').DataTable();

       

    $('#toggle').click(function() {

    $('#magicsuggest').slideToggle();

    });

        var ms = $('#magicsuggest').magicSuggest({

        data: 'autocomplete.php'

        });

       

        $(ms).on('selectionchange',function() {

        xhttp = new XMLHttpRequest();

        xhttp.open("GET", "updateEvent.php?id=1&string=" + JSON.stringify(this.getSelection()), true);

        xhttp.send();

    });

        });

    </script> 

    </head>